DatePicker dialog is used to pick date in Android and iOS applications. By default react native has two different DatePicker component 1st one is DatePickerIOS and 2nd is DatePickerAndroid, but it is very difficult to configure two component for single task. So after finding a lot on Internet finally i found an immersive library called as react-native-datepicker-dialog . This library comes with an awesome functionality that using a single code developers can create DatePicker for both android and iOS applications. So let’s get started .
Contents in this project React Native Common DatePicker for Android and iOS tutorial :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add react-native-datepicker-dialog library inside your project :
Open Your project in command prompt and execute below command inside your project’s folder.
|
1
|
npm i react–native–datepicker–dialog —save
|
3. After successfully installed the react-native-datepicker-dialog library we need to install another library known as moment. To install the moment library inside your project execute the below command in project’s folder.
|
1
|
npm install —save moment react–moment
|
4. Import AppRegistry, StyleSheet, Text, View, TouchableOpacity in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from ‘react-native’;
|
5. Import DatePickerDialog and moment .
|
1
2
3
|
import { DatePickerDialog } from ‘react-native-datepicker-dialog’
import moment from ‘moment’;
|
6. Create constructor in your main class with props and define two variables DateText and DateHolder using state.
DateText : is used to show date on screen using Text component.
DateHolder : is used to get date from DatePicker dialog.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
constructor(props){
super(props);
this.state = {
DateText: ”,
DateHolder: null,
}
}
|
7. Create a function named as DatePickerMainFunctionCall() . This function would call on Text box onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
DatePickerMainFunctionCall = () => {
let DateHolder = this.state.DateHolder;
if(!DateHolder || DateHolder == null){
DateHolder = new Date();
this.setState({
DateHolder: DateHolder
});
}
//To open the dialog
this.refs.DatePickerDialog.open({
date: DateHolder,
});
}
|
8. Create another function named as onDatePickedFunction() with date argument inside it. This function would call after the DatePickerMainFunctionCall(). Using this function we would set the pick date in Text component.
|
1
2
3
4
5
6
|
onDatePickedFunction = (date) => {
this.setState({
dobDate: date,
DateText: moment(date).format(‘DD-MMM-YYYY’)
});
}
|
9. Create a Parent View in render’s return block and add Text Component inside it to show the Application name, After that Create a TouchableOpacity component and call the DatePickerMainFunctionCall on the onPress of TouchableOpacity. Now make a View inside the TouchableOpacity and create another Text component inside it, Which would show us the selected date.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
render() {
return (
<View style={styles.container}>
<Text style={styles.content}>
React Native Date Picker Dialog Example
</Text>
<TouchableOpacity onPress={this.DatePickerMainFunctionCall.bind(this)} >
<View style={styles.datePickerBox}>
<Text style={styles.datePickerText}>{this.state.DateText}</Text>
</View>
</TouchableOpacity>
{/* Place the dialog component at end of your views and assign the references, event handlers to it.*/}
<DatePickerDialog ref=“DatePickerDialog” onDatePicked={this.onDatePickedFunction.bind(this)} />
</View>
);
}
|
10. Create CSS Style sheet for all views.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
backgroundColor: ‘#FFFFFF’
},
content: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
datePickerBox:{
marginTop: 9,
borderColor: ‘#FF5722’,
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: ‘#000’,
},
});
|
11. Now call the AppRegistry .
|
1
|
AppRegistry.registerComponent(‘Mainproject’, () => Mainproject);
|
12. Complete source code for index.android.js / index.ios.js file
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
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 Mainproject extends Component {
constructor(props){
super(props);
this.state = {
DateText: ”,
DateHolder: null,
}
}
/**
* Textbox click listener
*/
DatePickerMainFunctionCall = () => {
let DateHolder = this.state.DateHolder;
if(!DateHolder || DateHolder == null){
DateHolder = new Date();
this.setState({
DateHolder: DateHolder
});
}
//To open the dialog
this.refs.DatePickerDialog.open({
date: DateHolder,
});
}
/**
* Call back for dob date picked event
*
*/
onDatePickedFunction = (date) => {
this.setState({
dobDate: date,
DateText: moment(date).format(‘DD-MMM-YYYY’)
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.content}>
React Native Date Picker Dialog Example
</Text>
<TouchableOpacity onPress={this.DatePickerMainFunctionCall.bind(this)} >
<View style={styles.datePickerBox}>
<Text style={styles.datePickerText}>{this.state.DateText}</Text>
</View>
</TouchableOpacity>
{/* Place the dialog component at end of your views and assign the references, event handlers to it.*/}
<DatePickerDialog ref=“DatePickerDialog” onDatePicked={this.onDatePickedFunction.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: ‘#FF5722’,
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: ‘#000’,
},
});
AppRegistry.registerComponent(‘Mainproject’, () => Mainproject);
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
Popup Menu Overflow Menu in React Navigation React Native
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
Render Raw HTML Code in React Native App Using WebView
React Native Apply Filter on JSON ListView Data Using PHP MySQL
React Native Create Custom Bottom Tab Bar Navigator Example
