@leonardodino/react-native-datepicker

react-native DatePicker component Android and iOS

Stats

StarsIssuesVersionUpdatedCreatedSize
@leonardodino/react-native-datepicker
101.8.04 years ago4 years agoMinified + gzip package size for @leonardodino/react-native-datepicker in KB

Readme

react-native-datepicker

npm version Build Status

react-native DatePicker component for Android and iOS

Install

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

or

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.