TimePicker

React TimePicker

example

http://react-component.github.io/time-picker/

install

npm install rc-time-picker

Usage

import TimePicker from 'rc-time-picker';
import ReactDOM from 'react-dom';
import 'rc-time-picker/assets/index.css';
ReactDOM.render(<TimePicker />, container);

API

TimePicker

| Name | Type | Default | Description | |-------------------------|-----------------------------------|---------|-------------| | prefixCls | String | 'rc-time-picker' | prefixCls of this component | | clearText | String | 'clear' | clear tooltip of icon | | disabled | Boolean | false | whether picker is disabled | | allowEmpty | Boolean | true | allow clearing text | | open | Boolean | false | current open state of picker. controlled prop | | defaultValue | moment | null | default initial value | | defaultOpenValue | moment | moment() | default open panel value, used to set utcOffset,locale if value/defaultValue absent | | value | moment | null | current value | | placeholder | String | '' | time input's placeholder | | className | String | '' | time picker className | | id | String | '' | time picker id | | popupClassName | String | '' | time panel className | | popupStyle | object | {} | customize popup style | showHour | Boolean | true | whether show hour | | | showMinute | Boolean | true | whether show minute | | showSecond | Boolean | true | whether show second | | format | String | - | moment format | | disabledHours | Function | - | disabled hour options | | disabledMinutes | Function | - | disabled minute options | | disabledSeconds | Function | - | disabled second options | | use12Hours | Boolean | false | 12 hours display mode | | hideDisabledOptions | Boolean | false | whether hide disabled options | | onChange | Function | null | called when select a different value | | onAmPmChange | Function | null | called when select an am/pm value | | addon | Function | - | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like panel.close().| | placement | String | bottomLeft | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | | transitionName | String | '' | | | name | String | - | sets the name of the generated input | | onOpen | Function({ open }) | | when TimePicker panel is opened | | onClose | Function({ open }) | | when TimePicker panel is closed | | hourStep | Number | 1 | interval between hours in picker | | minuteStep | Number | 1 | interval between minutes in picker | | secondStep | Number | 1 | interval between seconds in picker | | focusOnOpen | Boolean | false | automatically focus the input when the picker opens | | inputReadOnly | Boolean | false | set input to read only | | inputIcon | ReactNode | | specific the select icon. | | clearIcon | ReactNode | | specific the clear icon. |

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-time-picker is released under the MIT license.