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 .

0xhyperdust/react-ts-timepicker