# rc-time-picker > React TimePicker Latest version **3.7.3** (published 2019-12-16) · 0 weekly downloads ## Install ```sh npm install rc-time-picker pnpm add rc-time-picker yarn add rc-time-picker bun add rc-time-picker ``` ## Health **Score 28/100 (F)** — status: abandoned. Positive: has types package; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.7.3 | | Published | 2019-12-16 | | First published | 2015-11-16 | | Weekly downloads | 0 | | TypeScript types | separate (@types/rc-time-picker) | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 130.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 477 | | Author | wuzhao.mail@gmail.com | | Maintainers | afc163, mg12, paranoidjk, sinoryx2, yesmeck, yiminghe, zombiej | | Keywords | react, react-time-picker, react-component, timepicker, time-picker, ui component, ui, component | ## Links - npm: https://www.npmjs.com/package/rc-time-picker - Repository: https://github.com/react-component/time-picker - Homepage: http://github.com/react-component/time-picker - Issues: http://github.com/react-component/time-picker/issues - npm.io page: https://npm.io/package/rc-time-picker ## Dependencies (6) - [raf](https://npm.io/package/raf.md) ^3.4.1 - [moment](https://npm.io/package/moment.md) 2.x - [classnames](https://npm.io/package/classnames.md) 2.x - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [rc-trigger](https://npm.io/package/rc-trigger.md) ^2.2.0 - [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.4 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 3.7.3 (latest) — 2019-12-16 - 4.0.0-alpha.2 — 2019-11-13 - 4.0.0-alpha.1 — 2019-11-13 - 4.0.0-alpha.0 — 2019-11-06 - 3.7.2 — 2019-08-26 - 3.7.1 — 2019-06-14 - 3.7.0 — 2019-06-13 - 3.6.6 — 2019-05-20 - 3.6.5 — 2019-05-20 - 3.6.4 — 2019-04-13 - 3.6.3 — 2019-04-12 - 3.6.2 — 2019-01-30 - 3.6.1 — 2019-01-22 - 3.6.0 — 2019-01-22 - 3.5.0 — 2018-12-24 - … 55 more at https://npm.io/package/rc-time-picker/versions ## README # TimePicker React TimePicker [![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][codecov-image]][codecov-url] [![Dependencies](https://img.shields.io/david/react-component/time-picker.svg?style=flat-square)](https://david-dm.org/react-component/time-picker) [![DevDependencies](https://img.shields.io/david/dev/react-component/time-picker.svg?style=flat-square)](https://david-dm.org/react-component/time-picker?type=dev) [![npm download][download-image]][download-url] [npm-image]: http://img.shields.io/npm/v/rc-time-picker.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-time-picker [travis-image]: https://img.shields.io/travis/react-component/time-picker.svg?style=flat-square [travis-url]: https://travis-ci.org/react-component/time-picker [codecov-image]: https://codecov.io/gh/react-component/time-picker/branch/master/graph/badge.svg [codecov-url]: https://codecov.io/gh/react-component/time-picker [download-image]: https://img.shields.io/npm/dm/rc-time-picker.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-time-picker 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(, 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. --- _Source: https://npm.io/package/rc-time-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._