react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
JavaScript Objective-C Python Java
Clone or download
Latest commit 2a209bd Apr 22, 2018
Permalink
Failed to load latest commit information.
.github chore(issue): add issue template Aug 23, 2017
__tests__ Revert "Use moment with locales" Apr 22, 2018
android build(datepicker): upgrade react-native to 0.49 and switch to Jest Oct 18, 2017
ios build(datepicker): upgrade react-native to 0.49 and switch to Jest Oct 18, 2017
.babelrc test(ci): add unit test May 25, 2016
.buckconfig refactor(refactor the project structor for example): Sep 22, 2016
.editorconfig function complete Apr 25, 2016
.eslintignore chore(eslint): add eslint for code style May 26, 2016
.eslintrc fix(datepicker): fix `disabled` props change not update bug #66 Dec 8, 2016
.flowconfig [build]: upgrade react-native Dec 8, 2016
.gitignore delete android build files Jul 13, 2017
.npmignore build(datepicker): upgrade react-native to 0.49 and switch to Jest Oct 18, 2017
.travis.yml ci(node): upgrade node to 6 Oct 18, 2017
.watchmanconfig refactor(refactor the project structor for example): Sep 22, 2016
CHANGELOG.md release v1.7.2 Apr 22, 2018
LICENSE Initial commit Apr 21, 2016
README.md feat(datepicker): merge some PR for bugs Apr 8, 2018
date_icon.png function complete Apr 25, 2016
datepicker.js fix(datepicker): fix androidMode enum not support 'clock' bug Apr 22, 2018
google_calendar.png refactor(refactor the project structor for example): Sep 22, 2016
index.js build(datepicker): upgrade react-native to 0.49 and switch to Jest Oct 18, 2017
package.json release v1.7.2 Apr 22, 2018
style.js Fix button not showing on react-native 0.54 and newer Mar 20, 2018

README.md

react-native-datepicker Build Status Coverage Status Monthly download Total downloads

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.

android ios

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 | Moment instance Specify the display date of DatePicker. string type value must match the specified format
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 Specify the icon. Same as the source of Image, always using require()
minDate - string | date Restricts the range of possible date values.
maxDate - string | date Restricts the range of possible date values.
duration 300 number Specify the animation duration of datepicker.
customStyles - object The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...
showIcon true boolean Controller whether or not show the icon
hideText false boolean Controller whether or not show the dateText
iconComponent - element Set the custom 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
allowFontScaling true boolean Set to false to disable font scaling for every text component
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
onPressMask - function This is called when clicking the ios modal mask
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.
TouchableComponent TouchableHighlight Component Replace the TouchableHighlight with a custom Component. For example : TouchableOpacity
getDateStr - Function A function to override how to format the date into a String for display, receives a Date instance

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