React Native DatePicker component for both Android and iOS, useing DatePickerAndroid, TimePickerAndroid and DatePickerIOS
npm install react-native-datepicker``bash`
npm install react-native-datepicker --save
Or using react-native-ui-xg, our react-naitve ui kit.
`bash`
npm install react-native-ui-xg --save
`javascript
import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'
export default class MyDatePicker extends Component {
constructor(props){
super(props)
this.state = {date:"2016-05-15"}
}
render(){
return (
date={this.state.date}
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2016-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
marginLeft: 36
}
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {this.setState({date: date})}}
/>
)
}
}
`
You can check index.js in the Example for detail.
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| style | - | object | Specify the style of the DatePicker, eg. width, height... |string
| date | - | string | date | Moment instance | Specify the display date of DatePicker. type value must match the specified format |enum
| mode | 'date' | | The enum of date, datetime and time |enum
| androidMode | 'default' | | The enum of default, calendar and spinner (only Android) |string
| format | 'YYYY-MM-DD' | | Specify the display format of the date, which using moment.js. The default value change according to the mode. |string
| confirmBtnText | '确定' | | Specify the text of confirm btn in ios. |string
| cancelBtnText | '取消' | | Specify the text of cancel btn in ios. |source
| iconSource | - | {uri: string} | number | Specify the icon. Same as the of Image, always using require() |number
| minDate | - | string | date | Restricts the range of possible date values. |
| maxDate | - | string | date | Restricts the range of possible date values. |
| duration | 300 | | Specify the animation duration of datepicker.|object
| customStyles | - | | The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...|boolean
| showIcon | true | | Controller whether or not show the icon |boolean
| hideText | false | | Controller whether or not show the dateText |element
| iconComponent | - | | Set the custom icon |boolean
| disabled | false | | Controller whether or not disable the picker |boolean
| is24Hour | - | | Set the TimePicker is24Hour flag. The default value depend on format. Only work in Android |boolean
| allowFontScaling | true | | Set to false to disable font scaling for every text component |string
| placeholder | '' | | The placeholder show when this.props.date is falsy |function
| onDateChange | - | | 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. |function
| onOpenModal | - | | This is called when the DatePicker Modal open. |function
| onCloseModal | - | | This is called when the DatePicker Modal close |function
| onPressMask | - | | This is called when clicking the ios modal mask |function
| modalOnResponderTerminationRequest | - | | Set the callback for React Native's Gesture Responder System's call to onResponderTerminationRequest. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases. |TouchableHighlight
| TouchableComponent | | Component | Replace the TouchableHighlight with a custom Component. For example : TouchableOpacity |String
| getDateStr | - | Function | A function to override how to format the date into a for display, receives a Date instance
* appearance: dateInput, disabled, dateTouchBody, dateIcon, placeholderText, dateTextdatePickerCon
* ios select panel: , datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel`
| Method | Params | Description |
| :------------ |:---------------:| :---------------:|
| onPressDate | - | Manually open the date picker panel |
| onPressCancel | - | Manually close the date picker panel like, similarly pressing cancel btn |