react-mobile-datepicker
a lightweight react date picker for mobile, Not more than 4k
react-mobile-datepicker provides a component that can set year, month, day, hour, minute and second by sliding up or down.
Features
- is only 4k.
- It does not depend on moment.js
Theme
default
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/default.png)
dark
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/dark.png)
ios
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/ios.png)
android
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/android.png)
android-dark
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/android-dark.png)
Custom date unit
set dateFormat for ['YYYY', 'MM', 'DD', 'hh', 'mm']
to configure year, month, day, hour, minute.
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/year-month-day-hour-minute.png)
set dateFormat for ['hh', 'mm', 'ss']
to configure hour, minute and second.
![](https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/hour-minute-second.png)
Getting Started
Install
Using npm:
$ npm install react-mobile-datepicker --save
Import what you need
The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.
Usage Example
PropTypes
Property | Type | Default | Description |
---|---|---|---|
isPopup | Boolean | true | whether as popup add a overlay |
isOpen | Boolean | false | whether to open datepicker |
theme | String | default | theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark' |
dateFormat | Array | ['YYYY', 'M', 'D'] | according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日'] |
dateSteps | Array | [1, 1, 1] | set step for each time unit |
showFormat | String | 'YYYY/MM/DD' | customize the format of the display title |
value | Date | new Date() | date value |
min | Date | new Date(1970, 0, 1) | minimum date |
max | Date | new Date(2050, 0, 1) | maximum date |
showHeader | Boolean | true | whether to show the header |
customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace showFormat |
confirmText | String | 完成 | customize the selection time button text |
cancelText | String | 取消 | customize the cancel button text |
onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter |
onCancel | Function | () => {} | the callback function after click button of cancel |