A time picker for your React app.
- Supports virtually any language
- No moment.js needed
- Install by executing
npm install react-time-picker
oryarn add react-time-picker
. - Import by adding
import TimePicker from 'react-time-picker'
. - Use by adding
<TimePicker />
. UseonChange
prop for getting new values.
Minimal demo page is included in sample directory.
Online demo is also available!
React-Time-Picker will play nicely with React-Date-Picker and React-DateTime-Picker. Check them out!
Your project needs to use React 16 or later. If you use older version of React, please refer to the table below to find suitable React-Time-Picker version.
React version | Newest supported React-Time-Picker |
---|---|
>16.0 | latest |
>15.0 | 2.1.1 |
If you need to support legacy browsers like Internet Explorer 10, you will need to use Intl.js or another Intl polyfill along with React-Date-Picker.
Add React-Time-Picker to your project by executing npm install react-time-picker
or yarn add react-time-picker
.
Here's an example of basic usage:
import React, { Component } from 'react';
import TimePicker from 'react-time-picker';
class MyApp extends Component {
state = {
time: '10:00',
}
onChange = time => this.setState({ time })
render() {
return (
<div>
<TimePicker
onChange={this.onChange}
value={this.state.time}
/>
</div>
);
}
}
If you don't want to use default React-Time-Picker styling to build upon it, you can import React-Time-Picker by using import TimePicker from 'react-time-picker/dist/entry.nostyle';
instead.
Displays an input field complete with custom inputs, native input and a clock.
Prop name | Description | Example values |
---|---|---|
clockClassName | Defines class name(s) that will be added along with "react-clock" to the main React-Clock <time> element. |
|
clockIcon | Defines the content of the clock button. Setting the value explicitly to null will hide the icon. |
|
className | Defines class name(s) that will be added along with "react-time-picker" to the main React-Time-Picker <div> element. |
|
clearIcon | Defines the content of the clear button. Setting the value explicitly to null will hide the icon. |
|
disabled | Defines whether the time picker should be disabled. Defaults to false. | true |
disableClock | Defines whether the clock should be disabled. Defaults to false. | true |
isOpen | Defines whether the clock should be opened. Defaults to false. | true |
locale | Defines which locale should be used by the time picker and the clock. Can be any IETF language tag. Defaults to user's browser settings. | "hu-HU" |
maxDetail | Defines how detailed time picking shall be. Can be "hour", "minute" or "second". Defaults to "minute". | "second" |
maxTime | Defines maximum time that the user can select. |
|
minTime | Defines minimum date that the user can select. |
|
name | Defines input name. Defaults to "time". | "myCustomName" |
onChange | Function called when the user picks a valid time. | (value) => alert('New time is: ', value) |
required | Defines whether date input should be required. Defaults to false. | true |
value | Defines the value of the input. |
|
TimePicker component passes all props to React-Clock, with the exception of className
(you can use clockClassName
for that instead). There are tons of customizations you can do! For more information, see Clock component props.
The MIT License.
![]() |
Wojciech Maj kontakt@wojtekmaj.pl http://wojtekmaj.pl |