react-native-datepicker

react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

Install

npm install react-native-datepicker --save

Example

Check index.js in the Example folder.

Usage

<DatePicker
  style={{width: 200}}
  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 folder for detail.

Properties

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`...
showIcon	true	`boolean`	Controller whether or not show the icon
placeholder	''	`string`	The placeholder show when this.props.date is falsy

Methods