@leonardodino/react-native-datepicker NPM

react-native-datepicker

react-native DatePicker component for Android and iOS

Install

npm install --save @leonardodino/react-native-datepicker

yarn add @leonardodino/react-native-datepicker

Screenshots

android ios

Usage

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 (
      <DatePicker
        style={{width: 200}}
        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})}}
      />
    )
  }
}

Properties

Prop	Default	Type	Description
style	-	`object`	Specify the style of the DatePicker, eg. width, height...
date	-	`date`	Specify the display date of DatePicker.
mode	'date'	`enum`	The `enum` of `date`, `datetime` and `time`
androidMode	'default'	`enum`	The `enum` of `default`, `calendar` and `spinner` (only Android)
confirmBtnText	'Confirm'	`string`	Specify the text of confirm btn in ios.
cancelBtnText	'Cancel'	`string`	Specify the text of cancel btn in ios.
locale	'en'	`string`	Specify the `bcp47` locale for display.
minDate	-	`date`	Restricts the range of possible date values.
maxDate	-	`date`	Restricts the range of possible date values.
duration	300	`number`	Specify the animation duration of datepicker.
customStyles	-	`number`	The hook of customize datepicker style, same as the native style. `dateTouchBody`, `dateInput`...
hideText	false	`boolean`	Controller whether or not show the `dateText`
disabled	false	`boolean`	Controller whether or not disable the picker
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.
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`

Property `customStyles` available keys

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