React Native datePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickeriOS.
npm install react-native-datepicker --saveCheck index.android.js in the Example folder.
<DatePicker
style={{width: 200}}
date={this.state.date}
mode="date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {this.setState({date: date})}}
/>You can check index.js in the Example folder for detail.
| Prop | Default | Type | Description |
|---|---|---|---|
| style | - | object |
Specify the style of the DatePicker, eg. width, height... |
| date | - | `string | date` |
| mode | 'date' | enum |
The enum of date, datetime and time |
| format | 'YYYY-MM-DD' | string |
Specify the display format of the date, which using moment.js. The default value change according to the mode. |
| confirmBtnText | '确定' | string |
Specify the text of confirm btn in ios. |
| cancelBtnText | '取消' | string |
Specify the text of cancel btn in ios. |
| iconSource | - | `{uri: string} | number` |
| minDate | - | `string | date` |
| maxDate | - | `string | date` |
| duration | 300 | number |
Specify the animation duration of datepicker. |
| customStyles | - | number |
The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput... |
| onDateChange | - | function(date:string) |
This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property. |
| Method | Params | Description |
|---|---|---|
| onPressDate | - | Manual call this method could open the DatePicker with js. |