React ios time picker Typescript

This is a fork of react-ios-time-picker adding typescript support and fixing nextjs implementation!

A modern time picker for your next React app.

• No moment.js needed
• Zero dependencies and lightweight
• Nextjs Friendly
• Both esm and cjs support

install

npm install react-time-picker-typescript

Usage

24 hours format

1import React, { useState } from 'react';
2import { TimePicker } from "react-time-picker-typescript";
3import "react-time-picker-typescript/dist/style.css";
4
5export default const  MyApp = () => {
6   const [value, setValue] = useState('10:00');
7
8   const onChange = (timeValue) => {
9      setValue(timeValue);
10   }
11
12   return (
13      <div>
14         <TimePicker onChange={onChange} value={value} />
15      </div>
16   );
17}

12 hours format

1import React, { useState } from 'react';
2import { TimePicker } from "react-time-picker-typescript";
3import "react-time-picker-typescript/dist/style.css";
4
5export default const  MyApp = () => {
6   const [value, setValue] = useState('10:00 AM');
7
8   const onChange = (timeValue) => {
9      setValue(timeValue);
10   }
11
12   return (
13      <div>
14         <TimePicker onChange={onChange} value={value} use12Hours/>
15      </div>
16   );
17}

API

Name	Type	Default	Description
value	String	n/a	Current value.
cellHeight	Number	35	The height of the cell number.
placeHolder	String	"Selet_time"	Time input's placeholder.
pickerDefaultValue	String	"00:00"	The initial value that the picker begin with in the first time.
disabled	Boolean	false	Whether picker is disabled.
isOpen	Boolean	false	Whether the time picker should be opened.
required	Boolean	false	Whether time input should be required.
cancelButtonText	String	"Cancel"	Cancel button text content
saveButtonText	String	"Save"	Save button text content
controllers	Boolean	true	Whether the buttons should be displayed
seperator	Boolean	true	whether show the colon seperator
id	String	n/a	Input time picker id
name	String	n/a	Input time picker name
use12Hours	Boolean	false	12 hours display mode
inputClassName	String	n/a	Input time picker className
popupClassName	String	n/a	time picker popup className
onChange	(value) => alert ('New time is: ', value)	n/a	Called when select a different value
onSave	(value) => alert ('Time saved is: ', value)	n/a	When the user clicks on save button
onClose	() => alert('Clock closed')	n/a	When the user clicks on cancel button
onAmPmChange	(value) => alert('Am/Pm changed : value')	n/a	called when select an am/pm value
onOpen	() => alert('time picker opened')	n/a	called when time picker is opened

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• Twitter - https://twitter.com/siamahnaf198
• Github - https://github.com/siamahnaf

License

The MIT License.