react-native-datepicker-dialog
Version:
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.
248 lines (200 loc) • 6.75 kB
Markdown
# 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](https://github.com/pandiaraj44/react-native-datepicker-dialog#getting-started)
- [ Example](https://github.com/pandiaraj44/react-native-datepicker-dialog#example)
- [Documentation](https://github.com/pandiaraj44/react-native-datepicker-dialog#documentation)
- [References](https://github.com/pandiaraj44/react-native-datepicker-dialog#references)
- [Demo](https://github.com/pandiaraj44/react-native-datepicker-dialog#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 ( 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
