material-ui-time-picker

KO | EN

gitlite — search

#python #android #deep-learning #linux #docker #java #windows #awesome #awesome-list #vue #security #ios #openai #open-source

material-ui-time-picker

(★ 126)

A time picker for Material-UI.

material-ui-time-picker Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# material-ui-time-picker
[![npm Package](https://img.shields.io/npm/v/material-ui-time-picker.svg)](https://www.npmjs.com/package/material-ui-time-picker)
[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-time-picker.svg?branch=master)](https://travis-ci.org/TeamWertarbyte/material-ui-time-picker)
[![Coverage Status](https://coveralls.io/repos/github/TeamWertarbyte/material-ui-time-picker/badge.svg?branch=master)](https://coveralls.io/github/TeamWertarbyte/material-ui-time-picker?branch=master)

This project provides a [time picker][time-picker-spec] for [Material-UI][material-ui].

![Demo](https://raw.githubusercontent.com/TeamWertarbyte/material-ui-time-picker/master/demo.gif)

## 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][legacy-time-picker]:

```jsx
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 `FormControl`s.

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

[time-picker-spec]: https://material.io/guidelines/components/pickers.html#pickers-time-pickers
[material-ui]: https://material-ui.com/
[legacy-time-picker]: http://v0.material-ui.com/#/components/time-picker
[styleguide]: https://teamwertarbyte.github.io/material-ui-time-picker

material-ui-time-picker

material-ui-time-picker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

material-ui-time-picker

material-ui-time-picker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README