https://github.com/teamwertarbyte/material-ui-time-picker

A time picker for Material-UI.
https://github.com/teamwertarbyte/material-ui-time-picker

material-design material-ui react time-picker ui-components

Last synced: 2 days ago
JSON representation

A time picker for Material-UI.

• Host: GitHub
• URL: https://github.com/teamwertarbyte/material-ui-time-picker
• Owner: TeamWertarbyte
• License: mit
• Created: 2017-10-15T17:33:21.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T04:05:50.000Z (about 2 years ago)
• Last Synced: 2025-01-21T17:07:49.184Z (10 days ago)
• Topics: material-design, material-ui, react, time-picker, ui-components
• Language: JavaScript
• Homepage: https://mui.wertarbyte.com/#material-ui-time-picker
• Size: 3.9 MB
• Stars: 127
• Watchers: 5
• Forks: 20
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](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

 this.handleChange(time)}

/>

// controlled input

 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