Package Exports

react-native-datepicker-dialog

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-datepicker-dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.

JSPM