React TimePicker using date-fns

Usage no npm install needed!

<script type="module">
  import dateFnsTimePicker from '';



React TimePicker

NPM version node version npm download



npm install rc-time-picker-date-fns


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



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 Date null default initial value
defaultOpenValue Date new Date default open panel value, used to set utcOffset,locale if value/defaultValue absent
value Date null current value
placeholder String '' time input's placeholder
className String '' time picker className
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 - date-fns 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 opened
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

Test Case

npm test
npm run chrome-test


npm run coverage

open coverage/ dir


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