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"
        iOSMode="spinner"
        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 | Dayjs 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) | | iOSMode | 'spinner' | enum | The enum of default, compact, inline and spinner (only IOS) | | format | 'YYYY-MM-DD' | string | Specify the display format of the date, which using day.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 day.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 |