react-native-datepicker-dialog

This library provides the cross-platform components for to open the date picker dialogs in an effective way. It uses the native DatePickerAndroid & DatePickerIOS components. It will work for both ios & android.

• Getting Started
• Example
• Documentation
• References
• Demo

Getting Started

1. Install npm i react-native-datepicker-dialog --save.

2. Import DatePickerDialog component

import { DatePickerDialog } from 'react-native-datepicker-dialog'

3. Place the dialog component at end of your views and assign the references, event handlers to it

<DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
<DatePickerDialog ref="journeyDialog" onDatePicked={this.onJourneyDatePicked.bind(this)} />

onDOBDatePicked = (date) => {
    //Here you will get the selected date
    this.setState({
      dobDate: date,
      dobText: moment(date).format('DD-MMM-YYYY')
    });
  }

4. Open the date picker dialog

this.refs.dobDialog.open({
      date: new Date(),
      maxDate: new Date() //To restirct future date
});

It will work for both ios & android.

Example

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

import { DatePickerDialog } from 'react-native-datepicker-dialog'
import moment from 'moment';

export default class DatePickerTimePickerDialog extends Component {

  constructor(props){
    super(props);
    this.state = {
      dobText: '',
      dobDate: null,
      journeyText: '',
      journeyDate: null,
    }
  }

  /**
   * DOB textbox click listener
   */
  onDOBPress = () => {
    let dobDate = this.state.dobDate;

    if(!dobDate || dobDate == null){
      dobDate = new Date();
      this.setState({
        dobDate: dobDate
      });
    }

    //To open the dialog
    this.refs.dobDialog.open({
      date: dobDate,
      maxDate: new Date() //To restirct future date
    });

  }

  /**
   * Call back for dob date picked event
   *
   */
  onDOBDatePicked = (date) => {
    this.setState({
      dobDate: date,
      dobText: moment(date).format('DD-MMM-YYYY')
    });
  }

  /**
   * Journey date textbox click listener
   */
  onJourneyDatePress = () => {
    let journeyDate = this.state.journeyDate;

    if(!journeyDate || journeyDate == null){
      journeyDate = new Date();
      this.setState({
        journeyDate: journeyDate
      });
    }

    //To open the dialog
    this.refs.journeyDialog.open({
      date: journeyDate,
      minDate: new Date() //To restirct past date
    });

  }

  /**
   * Call back for journey date picked event
   *
   */
  onJourneyDatePicked = (date) => {
    this.setState({
      journeyDate: date,
      journeyText: moment(date).format('DD MMM, YYYY')
    });
  }

  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.content}>
          Date Picker Dialog Example
        </Text>

        <View style={{flex:1, marginTop:10}}>
          <Text>DOB</Text>
          <TouchableOpacity onPress={this.onDOBPress.bind(this)} >
            <View style={styles.datePickerBox}>
              <Text style={styles.datePickerText}>{this.state.dobText}</Text>
            </View>
          </TouchableOpacity>

          <Text style={{marginTop: 20}}>Journey Date</Text>
          <TouchableOpacity onPress={this.onJourneyDatePress.bind(this)} >
            <View style={styles.datePickerBox}>
              <Text style={styles.datePickerText}>{this.state.journeyText}</Text>
            </View>
          </TouchableOpacity>

        </View>

        {/* Place the dialog component at end of your views and assign the references, event handlers to it.*/}
        <DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
        <DatePickerDialog ref="journeyDialog" onDatePicked={this.onJourneyDatePicked.bind(this)} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#FFFFFF'
  },
  content: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  datePickerBox:{
    marginTop: 9,
    borderColor: '#ABABAB',
    borderWidth: 0.5,
    padding: 0,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    borderBottomLeftRadius: 4,
    borderBottomRightRadius: 4,
    height: 38,
    justifyContent:'center'
  },
  datePickerText: {
    fontSize: 14,
    marginLeft: 5,
    borderWidth: 0,
    color: '#121212',
  },
});

AppRegistry.registerComponent('DatePickerTimePickerDialog', () => DatePickerTimePickerDialog);

Documentation

Instance Methods

1. open(options: Object) - Opens the standard date picker dialog

The available keys for the options object are:

• date (Date object or timestamp in milliseconds) - date to show by default
• minDate (Date or timestamp in milliseconds) - minimum date that can be selected
• maxDate (Date object or timestamp in milliseconds) - minimum date that can be selected

2. getSelectedDate - It will return the selected date (@return date object)

Props

1. onDatePicked: PropTypes.func - Date picked handler. This method will be called when the user selected the date from picker.The first and only argument is a Date object representing the picked date and time.

2. onCancel: PropTypes.func - Date cancelled handler. This method will be called when the user dismissed the picker.

3. okLabel: PropTypes.string - **Ios Only** (Ok button label) . Default value is 'Ok'

4. cancelLabel: PropTypes.string - **Ios Only** (Cancel button label) . Default value is 'Cancel'

References

• https://facebook.github.io/react-native/docs/datepickerandroid.html
• http://facebook.github.io/react-native/releases/0.38/docs/datepickerios.html#datepickerios
• https://github.com/facebook/react-native/commit/eaccd7e82e228d744e6aef34b332d99c1ff616a5

Demo

Android

Ios