TimePicker

Version of react-component/time-picker that uses Luxon rather than Moment.

Examples

https://robinbentley.github.io/time-picker-luxon/

Install

npm install --save rc-time-picker-luxon

Usage

// include rc-time-picker-luxon/assets/index.css however your styles are managed
import TimePicker from 'rc-time-picker-luxon';
import ReactDOM from 'react-dom';
ReactDOM.render(<TimePicker />, container);

Props

| 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 | DateTime | null | default initial value | | defaultOpenValue | DateTime | DateTime.local() | default open panel value, used to set utcOffset,locale if value/defaultValue absent | | value | DateTime | null | current value | | placeholder | String | '' | time input's placeholder | | className | String | '' | time picker className | | id | String | '' | time picker id | | popupClassName | String | '' | time panel className | | 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 | | 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 ['left','right','top','bottom', '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 |Test Case | focusOnOpen | Boolean Test Case | 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. |

Running Tests

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

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