# rmc-date-picker > React Mobile DatePicker Component for web and react-native Latest version **6.0.10** (published 2019-07-30) · MIT license · 0 weekly downloads ## Install ```sh npm install rmc-date-picker pnpm add rmc-date-picker yarn add rmc-date-picker bun add rmc-date-picker ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 6.0.10 | | Published | 2019-07-30 | | First published | 2015-12-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 62.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 396 | | Maintainers | duxiaodong, paranoidjk, silentcloud, warmhug, yiminghe, yuanfei.gyf, zhang740 | | Keywords | react, react-component, react-mobile-date-picker, date-picker | ## Links - npm: https://www.npmjs.com/package/rmc-date-picker - Repository: https://github.com/react-component/m-date-picker - Issues: https://github.com/react-component/m-date-picker/issues - npm.io page: https://npm.io/package/rmc-date-picker ## Dependencies (2) - [rmc-picker](https://npm.io/package/rmc-picker.md) ~5.0.0 - [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 6.0.10 (latest) — 2019-07-30 - 6.0.0-alpha.10 (beta) — 2017-09-28 - 6.0.9 — 2019-04-03 - 6.0.8 — 2018-05-22 - 6.0.7 — 2018-05-21 - 6.0.6 — 2018-03-10 - 6.0.5 — 2017-10-17 - 6.0.4 — 2017-10-17 - 6.0.3 — 2017-10-17 - 6.0.2 — 2017-10-17 - 6.0.1 — 2017-10-16 - 6.0.0 — 2017-10-12 - 6.0.0-alpha.9 — 2017-09-22 - 6.0.0-alpha.8 — 2017-09-22 - 6.0.0-alpha.7 — 2017-09-18 - … 54 more at https://npm.io/package/rmc-date-picker/versions ## README # rmc-date-picker --- React Mobile DatePicker Component (web and react-native) [![NPM version][npm-image]][npm-url] ![react-native](https://img.shields.io/badge/react--native-%3E%3D_0.30.0-green.svg) ![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg) [![build status][travis-image]][travis-url] [![Codecov](https://img.shields.io/codecov/c/github/react-component/m-date-picker.svg?style=flat-square)](https://codecov.io/gh/react-component/m-date-picker) [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] [npm-image]: http://img.shields.io/npm/v/rmc-date-picker.svg?style=flat-square [npm-url]: http://npmjs.org/package/rmc-date-picker [travis-image]: https://img.shields.io/travis/react-component/m-date-picker.svg?style=flat-square [travis-url]: https://travis-ci.org/react-component/m-date-picker [gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-date-picker.svg?style=flat-square [gemnasium-url]: https://gemnasium.com/react-component/m-date-picker [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square [node-url]: http://nodejs.org/download/ [download-image]: https://img.shields.io/npm/dm/rmc-date-picker.svg?style=flat-square [download-url]: https://npmjs.org/package/rmc-date-picker ## Screenshots ### web ### ios ### android ## Usage see example ## Development ``` npm i npm start ``` ## Example http://localhost:8000/examples/ online example: http://react-component.github.io/m-date-picker/ ## react-native ``` npm run rn-init npm run watch-tsc react-native start react-native run-ios ``` ## install [![rmc-date-picker](https://nodei.co/npm/rmc-date-picker.png)](https://npmjs.org/package/rmc-date-picker) ## API ### DatePicker props | name | description | type | default | |----------|----------------|----------|--------------| |className(web) | additional css class of root dom node | String | '' | |prefixCls(web) | prefix class | String | 'rmc-date-picker' | |pickerPrefixCls(web) | picker prefix class | String | 'rmc-picker' | |defaultDate | default selected date. | Date | | |date | The currently selected date. | Date | | |mode | The date picker mode. | String | 'date' enum('date', 'time', 'datetime', 'year', 'month') | |minDate | min date | Date | `new Date(2000, 1, 1, 0, 0, 0)` | |maxDate | max date | Date | `new Date(2030, 1, 1, 23, 59, 59)` | |minHour | min Hour `[0, 23]`| Number | `0` | |maxHour | max Hour `[0, 23]`| Number | `23` | |minMinute | max Minute `[0, 59]`| Number | `0` | |maxMinute | max Minute `[0, 59]`| Number| `59` | |locale | the locale of area | Object | import from 'rmc-date-picker/lib/locale/en_US' | |use12Hours | 12 hours display mode | Boolean | false | |minuteStep | The amount of time, in minutes, between each minute item. | Number | 1 | |onDateChange | Date change handler. | Function(date: Date) | '' | |onValueChange | fire when picker change | (vals: any, index: number) => void | | |formatMonth | Customize display value of months | (month:number, current:Date) => React.Node | | |formatDay | Customize display value of days | (day:number, current:Date) => React.Node | | ### rmc-date-picker/lib/Popup props | name | description | type | default | |----------|----------------|----------|--------------| |className(web) | additional css class of modal node | String | '' | |style(web) | additional modal style | object | {} | |popupTransitionName(web) | | String | | |maskTransitionName(web) | | String | | |prefixCls(web) | popup's prefix class | String | 'rmc-picker-popup' | |styles(react-native) | PopupPicker's styles | StyleSheet.create | | |datePicker | DatePicker element | React DatePicker element | | |date | The currently selected date. | Date | | |visible | whether pop picker is visible | Boolean | false | |onChange | exec on ok | Function(date: Date) | | |onVisibleChange | called when pop picker visible change | Function | | |onDismiss | exec on dismiss | function | | |okText | ok button text | string/React.ReactElement | 'Ok' | |dismissText | dismiss button text | string/React.ReactElement | 'Dismiss' | |title | Popup title | string/React.ReactElement | '' | ## Test Case ``` npm test npm run chrome-test ``` ## Coverage ``` npm run coverage ``` open coverage/ dir ## License rmc-date-picker is released under the MIT license. --- _Source: https://npm.io/package/rmc-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._