This library provides the cross-platform components for to open the date picker dialogs in effective way. It uses the native DatePickerAndroid & DatePickerIOS components. It will work for both ios & android.
npm install react-native-datepicker-dialog- Getting Started
- Example
- Documentation
- References
- Demo
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
``
```
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.
/**
* 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 (
Date Picker Dialog Example
DOB
{this.state.dobText}
Journey Date
{this.state.journeyText}
{/ Place the dialog component at end of your views and assign the references, event handlers to it./}
);
}
}
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
$3
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)
$3
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'`- 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