React TS Timepicker

 !dependencies  

This is a lightweight and easy to use time picker without dependencies for React, written in Typescript and thoroughly covered by unit tests.

Demo

https://codesandbox.io/s/52ll738ljk

Installation

Install plugin with npm:
``
$ npm install react-ts-timepicker
`
Or yarn:
`
$ yarn add react-ts-timepicker
`

Compatibility

React 15.6+

Basic usage

`javascript
import React, { Component } from 'react';
import TimePicker from 'react-ts-timepicker';

class App extends Component {
state = {
value: '10:00',
}

onChange = value => {
this.setState({ value })
}

render() {
return (



);
}
}
`

Configuration

Property | Type | Default value |Description
------------ | ------------- | ------------- | -------------
value | string / Date / null | null | The value of the input.
timeFormat | string | hh:mma | moment.js like time format string. See below for more information.
name | string | timepicker | The name of the input.
onChange | function | () => {} | Function called when the user picks a valid time. Type of the value will be the same as value has.
step | number | 30 | Step in minutes between two suggestions.
minTime | string / null | null | Suggestions start time.
maxTime | string / null | null | Suggestions end time. Without this prop suggestions max time equals one day.
includeMax | boolean | true | Whether or not include suggestions max time.
hideOnScroll | boolean | false | Whether or not hide suggestions on window scroll.
allowOnlySuggestions | boolean | false | Allow on suggestions values to be entered to the input. Input value will be rounded to the nearest suggestion.
className | string | '' | Class name of the wrapping div. Can be used for overriding default time picker styles.
inputClass | string | '' | Class name of the input element.
appendTo | string / null | body | Element where the suggestions are appended. Takes either string to use as a selector or null to append suggestions to time picker wrapper itself.

Time formats

Input | Example | Description
------------ | ------------- | -------------
H HH | 0..23 | Hours (24 hour time)
h hh | 1..12 | Hours (12 hour time used with a A.)
a A | am pm | Post or ante meridiem (Note the one character a p are also considered valid)
m mm | 0..59 | Minutes
s ss | 0..59` | Seconds

License

This project is licensed under the MIT License .