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 .