React TS Timepicker

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

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 (
      <div>
        <TimePicker
          onChange={this.onChange}
          value={this.state.value}
        />
      </div>
    );
  }
}

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 .