react-native DatePicker component Android and iOS
npm install @leonardodino/react-native-datepicker[![npm version][npm-badge]][npm-url]
[![Build Status][travis-badge]][travis-url]
react-native DatePicker component for Android and iOS
``bash`
npm install --save @leonardodino/react-native-datepicker
or
`bash`
yarn add @leonardodino/react-native-datepicker
`javascript
import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'
export default class MyDatePicker extends Component {
state = {date: new Date('2016-05-15')}
render(){
return (
date={this.state.date}
mode='date'
placeholder='select date'
minDate={new Date('2016-05-01')}
maxDate={new Date('2016-06-01')}
confirmBtnText='Confirm'
cancelBtnText='Cancel'
customStyles={{
dateInput: {
marginLeft: 36
}
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {this.setState({date})}}
/>
)
}
}
`
| Prop | Default | Type | Description |
|---|:---:|:---:|---|
| style | - | object | Specify the style of the DatePicker, eg. width, height... |date
| date | - | | Specify the display date of DatePicker. |enum
| mode | 'date' | | The enum of date, datetime and time |enum
| androidMode | 'default' | | The enum of default, calendar and spinner (only Android) |string
| confirmBtnText | 'Confirm' | | Specify the text of confirm btn in ios. |string
| cancelBtnText | 'Cancel' | | Specify the text of cancel btn in ios. |string
| locale | 'en' | | Specify the bcp47 locale for display. |date
| minDate | - | | Restricts the range of possible date values. |date
| maxDate | - | | Restricts the range of possible date values. |number
| duration | 300 | | Specify the animation duration of datepicker.|number
| customStyles | - | | The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...|boolean
| hideText | false | | Controller whether or not show the dateText |boolean
| disabled | false | | Controller whether or not disable the picker |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. |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 |
* appearance: dateInput, disabled, dateTouchBody, placeholderText, dateTextdatePickerCon
* ios select panel: , datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel`
[npm-badge]: https://img.shields.io/npm/v/@leonardodino/react-native-datepicker.svg
[npm-url]: https://www.npmjs.com/package/@leonardodino/react-native-datepicker
[travis-badge]: https://api.travis-ci.org/leonardodino/react-native-datepicker.svg
[travis-url]: https://travis-ci.org/leonardodino/react-native-datepicker