material-ui-time-picker

This project provides a time picker for Material-UI.

Installation

npm i --save material-ui-time-picker

Usage

There are multiple ways to use this component to allow greater flexibility. This is the most basic usage that behaves similar to the Material-UI 0.x time picker:

import TimeInput from 'material-ui-time-picker'

// uncontrolled input
<TimeInput
  mode='12h'
  onChange={(time) => this.handleChange(time)}
/>

// controlled input
<TimeInput
  mode='12h'
  value={this.state.time}
  onChange={(time) => this.handleChange(time)}
/>

For detailed documentation, take a look into the styleguide. The source code, especially the tests, might also be helpful.

TimeInput Properties

|Name|Type|Default|Description| |---|---|---|---| |autoOk|bool|false|If true, automatically accept and close the picker on set minutes.| |cancelLabel|string|'Cancel'|Override the label of the cancel button.| |ClockProps|object||Properties to pass down to the Clock component.| |defaultValue|Date||This default value overrides initialTime and placeholder.| |initialTime|Date||The default value for the time picker.| |inputComponent|elementType|Input|The component used for the input. Either a string to use a DOM element or a component.| |placeholder|string||The placeholder value for the time picker before a time has been selected.| |mode|enum: '12h' '24h'|'12h'|Sets the clock mode, 12-hour or 24-hour clocks are supported.| |okLabel|string|'Ok'|Override the label of the ok button.| |onChange|func||Callback that is called with the new date (as Date instance) when the value is changed.| |openOnMount|bool||If true, automatically opens the dialog when the component is mounted.| |TimePickerProps|object||Properties to pass down to the TimePicker component.| |value|Date||The value of the time picker, for use in controlled mode.|

Note: TimeInput behaves like Material-UI's Input component and can be used inside FormControls.

License

The files included in this repository are licensed under the MIT license.