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);

$3