Material-ui-time-picker NPM

material-ui-time-picker

This project provides a time picker for Material-UI.

Demo

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.