react-native-datepicker

react native datePicker component for both Android and IOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS

Install

npm install react-native-datepicker --save

Or using react-native-ui-xg, our react-naitve ui kit.

npm install react-native-ui-xg --save

Example

Check index.android.js in the Example.

Usage

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 (
      <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 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`
androidMode	'default'	`enum`	The `enum` of `default`, `calendar` and `spinner` (only Android)
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
disabled	false	`boolean`	Controller whether or not disable the picker
is24Hour	-	`boolean`	Set the TimePicker is24Hour flag. The default value depend on `format`. Only work in Android
placeholder	''	`string`	The placeholder show when this.props.date is falsy
onDateChange	-	`function`	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.
onOpenModal	-	`function`	This is called when the DatePicker Modal open.
onCloseModal	-	`function`	This is called when the DatePicker Modal close
modalOnResponderTerminationRequest	-	`function`	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.

Property `customStyles` available keys

appearance: dateInput, disabled, dateTouchBody, dateIcon, placeholderText, dateText
ios select panel: datePickerCon, datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel

Instance Methods

Method	Params	Description
onPressDate	-	Manually open the date picker panel
onPressCancel	-	Manually close the date picker panel like, similarly pressing cancel btn

drhops/react-native-datepicker