Skip to content

Commit 2129367

Browse files
pandiaraj44pandiaraj44
committed
Documentation added
1 parent 3a95efa commit 2129367

File tree

5 files changed

+255
-18
lines changed

5 files changed

+255
-18
lines changed

‎README.md‎

Lines changed: 240 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,240 @@
1-
# react-native-datepicker-timepicker-dialog
2-
This react-native library provides the cross-platform components for to open the date, time picker dialogs in an effective way. It uses the native DatePickerAndroid & DatePickerIOS components.
1+
# react-native-datepicker-dialog
2+
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.
3+
4+
- [Getting Started](https://github.com/pandiaraj44/react-native-datepicker-dialog#getting-started)
5+
- [ Example](https://github.com/pandiaraj44/react-native-datepicker-dialog#example)
6+
- [Documentation](https://github.com/pandiaraj44/react-native-datepicker-dialog#documentation)
7+
- [References](https://github.com/pandiaraj44/react-native-datepicker-dialog#references)
8+
- [Demo](https://github.com/pandiaraj44/react-native-datepicker-dialog#demo)
9+
10+
# Getting Started
11+
12+
**1. Install**
13+
` npm i react-native-datepicker-dialog --save. `
14+
15+
**2. Import DatePickerDialog component**
16+
17+
`import { DatePickerDialog } from 'react-native-datepicker-dialog'`
18+
19+
**3. Place the dialog component at end of your views and assign the references, event handlers to it**
20+
```
21+
<DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
22+
<DatePickerDialog ref="journeyDialog" onDatePicked={this.onJourneyDatePicked.bind(this)} />
23+
24+
```
25+
```
26+
onDOBDatePicked = (date) => {
27+
//Here you will get the selected date
28+
this.setState({
29+
dobDate: date,
30+
dobText: moment(date).format('DD-MMM-YYYY')
31+
});
32+
}
33+
```
34+
**4. Open the date picker dialog**
35+
```
36+
this.refs.dobDialog.open({
37+
date: new Date(),
38+
maxDate: new Date() //To restirct future date
39+
});
40+
```
41+
42+
It will work for both ios & android.
43+
44+
# Example
45+
```
46+
/**
47+
* Sample React Native App
48+
* https://github.com/facebook/react-native
49+
* @flow
50+
*/
51+
52+
import React, { Component } from 'react';
53+
import {
54+
AppRegistry,
55+
StyleSheet,
56+
Text,
57+
View,
58+
TouchableOpacity,
59+
} from 'react-native';
60+
61+
import { DatePickerDialog } from 'react-native-datepicker-dialog'
62+
import moment from 'moment';
63+
64+
export default class DatePickerTimePickerDialog extends Component {
65+
66+
constructor(props){
67+
super(props);
68+
this.state = {
69+
dobText: '',
70+
dobDate: null,
71+
journeyText: '',
72+
journeyDate: null,
73+
}
74+
}
75+
76+
/**
77+
* DOB textbox click listener
78+
*/
79+
onDOBPress = () => {
80+
let dobDate = this.state.dobDate;
81+
82+
if(!dobDate || dobDate == null){
83+
dobDate = new Date();
84+
this.setState({
85+
dobDate: dobDate
86+
});
87+
}
88+
89+
//To open the dialog
90+
this.refs.dobDialog.open({
91+
date: dobDate,
92+
maxDate: new Date() //To restirct future date
93+
});
94+
95+
}
96+
97+
/**
98+
* Call back for dob date picked event
99+
*
100+
*/
101+
onDOBDatePicked = (date) => {
102+
this.setState({
103+
dobDate: date,
104+
dobText: moment(date).format('DD-MMM-YYYY')
105+
});
106+
}
107+
108+
109+
/**
110+
* Journey date textbox click listener
111+
*/
112+
onJourneyDatePress = () => {
113+
let journeyDate = this.state.journeyDate;
114+
115+
if(!journeyDate || journeyDate == null){
116+
journeyDate = new Date();
117+
this.setState({
118+
journeyDate: journeyDate
119+
});
120+
}
121+
122+
//To open the dialog
123+
this.refs.journeyDialog.open({
124+
date: journeyDate,
125+
minDate: new Date() //To restirct past date
126+
});
127+
128+
}
129+
130+
/**
131+
* Call back for journey date picked event
132+
*
133+
*/
134+
onJourneyDatePicked = (date) => {
135+
this.setState({
136+
journeyDate: date,
137+
journeyText: moment(date).format('DD MMM, YYYY')
138+
});
139+
}
140+
141+
render() {
142+
return (
143+
<View style={styles.container}>
144+
145+
<Text style={styles.content}>
146+
Date Picker Dialog Example
147+
</Text>
148+
149+
<View style={{flex:1, marginTop:10}}>
150+
<Text>DOB</Text>
151+
<TouchableOpacity onPress={this.onDOBPress.bind(this)} >
152+
<View style={styles.datePickerBox}>
153+
<Text style={styles.datePickerText}>{this.state.dobText}</Text>
154+
</View>
155+
</TouchableOpacity>
156+
157+
<Text style={{marginTop: 20}}>Journey Date</Text>
158+
<TouchableOpacity onPress={this.onJourneyDatePress.bind(this)} >
159+
<View style={styles.datePickerBox}>
160+
<Text style={styles.datePickerText}>{this.state.journeyText}</Text>
161+
</View>
162+
</TouchableOpacity>
163+
164+
</View>
165+
166+
{/* Place the dialog component at end of your views and assign the references, event handlers to it.*/}
167+
<DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
168+
<DatePickerDialog ref="journeyDialog" onDatePicked={this.onJourneyDatePicked.bind(this)} />
169+
170+
</View>
171+
);
172+
}
173+
}
174+
175+
const styles = StyleSheet.create({
176+
container: {
177+
flex: 1,
178+
padding: 10,
179+
backgroundColor: '#FFFFFF'
180+
},
181+
content: {
182+
fontSize: 20,
183+
textAlign: 'center',
184+
margin: 10,
185+
},
186+
datePickerBox:{
187+
marginTop: 9,
188+
borderColor: '#ABABAB',
189+
borderWidth: 0.5,
190+
padding: 0,
191+
borderTopLeftRadius: 4,
192+
borderTopRightRadius: 4,
193+
borderBottomLeftRadius: 4,
194+
borderBottomRightRadius: 4,
195+
height: 38,
196+
justifyContent:'center'
197+
},
198+
datePickerText: {
199+
fontSize: 14,
200+
marginLeft: 5,
201+
borderWidth: 0,
202+
color: '#121212',
203+
},
204+
});
205+
206+
AppRegistry.registerComponent('DatePickerTimePickerDialog', () => DatePickerTimePickerDialog);
207+
208+
```
209+
# Documentation
210+
### Instance Methods
211+
**1. open(options: Object)** - Opens the standard date picker dialog
212+
213+
The available keys for the `options` object are:
214+
* `date` (`Date` object or timestamp in milliseconds) - date to show by default
215+
* `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected
216+
* `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected
217+
218+
219+
**2. getSelectedDate** - It will return the selected date (@return date object)
220+
221+
### Props
222+
**1. onDatePicked: PropTypes.func** - Date picked handler.
223+
`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.`
224+
225+
**2. onCancel: PropTypes.func** - Date Cancelled handler.
226+
`This method will be called when the user dismissed the picker.`
227+
228+
# References
229+
230+
- https://facebook.github.io/react-native/docs/datepickerandroid.html
231+
- http://facebook.github.io/react-native/releases/0.38/docs/datepickerios.html#datepickerios
232+
- https://github.com/facebook/react-native/commit/eaccd7e82e228d744e6aef34b332d99c1ff616a5
233+
234+
# Demo
235+
236+
## Android
237+
![ezgif com-crop](https://cloud.githubusercontent.com/assets/22169327/20594086/e230d96e-b25a-11e6-9957-562a71c44cf8.gif)
238+
239+
### Ios
240+
![ezgif com-video-to-gif](https://cloud.githubusercontent.com/assets/22169327/20595838/991ec266-b261-11e6-9bab-3b86e8833519.gif)

‎index.android.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default class DatePickerTimePickerDialog extends Component {
118118

119119
</View>
120120

121-
{/* Place the dialog component at end of your views*/}
121+
{/* Place the dialog component at end of your views and assign the references, event handlers to it.*/}
122122
<DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
123123
<DatePickerDialog ref="journeyDialog" onDatePicked={this.onJourneyDatePicked.bind(this)} />
124124

‎lib/datepicker/DatePickerDialog.android.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class DatePickerDialog extends Component{
1919
/**
2020
* Date picked handler.
2121
*
22-
* This is called when the user selected the date from picker
22+
* This method will be called when the user selected the date from picker
2323
* The first and only argument is a Date object representing the picked
2424
* date and time.
2525
*/
@@ -28,7 +28,7 @@ export default class DatePickerDialog extends Component{
2828
/**
2929
* Date Cancelled handler.
3030
*
31-
* This is called when the user dismissed the picker.
31+
* This method will be called when the user dismissed the picker.
3232
*/
3333
onCancel: PropTypes.func,
3434
}

‎lib/datepicker/DatePickerDialog.ios.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,13 @@ export default class DatePickerDialog extends Component{
3838
}
3939

4040
/**
41-
* Opens the standard Android date picker dialog.
41+
* Opens the standard IOS date picker dialog.
4242
*
4343
* The available keys for the `options` object are:
4444
* * `date` (`Date` object or timestamp in milliseconds) - date to show by default
4545
* * `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected
4646
* * `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected
47-
*
48-
* Note the native date picker dialog has some UI glitches on Android 4 and lower
49-
* when using the `minDate` and `maxDate` options.
47+
*
5048
*/
5149
open(options: Object){
5250
this.setState({

‎package.json‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
{
22
"name": "react-native-datepicker-dialog",
3-
"version": "0.0.1",
4-
"description": "This react-native library provides the cross-platform components for to open the date, time picker dialogs in an effective way. It uses the native DatePickerAndroid & DatePickerIOS components.",
3+
"version": "0.0.4",
4+
"description": "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.",
55
"main": "main-index.js",
66
"scripts": {
77
"start": "node node_modules/react-native/local-cli/cli.js start",
88
"test": "jest"
99
},
1010
"repository": {
1111
"type": "git",
12-
"url": "https://github.com/pandiaraj44/react-native-datepicker-timepicker-dialog.git"
12+
"url": "https://github.com/pandiaraj44/react-native-datepicker-dialog.git"
1313
},
1414
"keywords": [
1515
"react-native",
16+
"datepicker",
17+
"timepicker",
18+
"react-native-datepicker",
1619
"DatePicker",
1720
"TimePicker",
1821
"date picker",
@@ -24,13 +27,10 @@
2427
"author": "Pandiarajan Nagarajan",
2528
"license": "MIT",
2629
"bugs": {
27-
"url": "https://github.com/pandiaraj44/react-native-datepicker-timepicker-dialog/issues"
30+
"url": "https://github.com/pandiaraj44/react-native-datepicker-dialog/issues"
2831
},
29-
"homepage": "https://github.com/pandiaraj44/react-native-datepicker-timepicker-dialog",
32+
"homepage": "https://github.com/pandiaraj44/react-native-datepicker-dialog",
3033
"dependencies": {
31-
"moment": "2.x.x",
32-
"react": "15.3.2",
33-
"react-native": "0.37.0"
3434
},
3535
"jest": {
3636
"preset": "jest-react-native"
@@ -42,6 +42,7 @@
4242
"babel-preset-react-native": "1.9.0",
4343
"jest": "17.0.3",
4444
"jest-react-native": "17.0.3",
45-
"react-test-renderer": "15.3.2"
45+
"react-test-renderer": "15.3.2",
46+
"moment": "2.x.x"
4647
}
4748
}

0 commit comments

Comments
 (0)