/
DatePicker.js
113 lines (107 loc) · 3.16 KB
/
DatePicker.js
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
import React from "react";
import {
Modal,
View,
Platform,
DatePickerIOS,
DatePickerAndroid
} from "react-native";
import { Text } from "native-base";
import variable from "../theme/variables/platform";
export class DatePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
defaultDate: new Date(),
chosenDate: undefined
};
}
componentDidMount = () => {
this.setState({
defaultDate: this.props.defaultDate ? this.props.defaultDate : new Date()
});
};
setDate(date) {
this.setState({ chosenDate: new Date(date) });
}
showDatePicker() {
if (Platform.OS === "android") {
this.openAndroidDatePicker();
} else {
this.setState({ modalVisible: true });
}
}
async openAndroidDatePicker() {
try {
const newDate = await DatePickerAndroid.open({
date: this.state.chosenDate
? this.state.chosenDate
: this.state.defaultDate,
minDate: this.props.minimumDate,
maxDate: this.props.maximumDate,
mode: this.props.androidMode
});
const { action, year, month, day } = newDate;
if (action === "dateSetAction") {
this.setState({ chosenDate: new Date(year, month, day) });
}
} catch ({ code, message }) {
console.warn("Cannot open date picker", message);
}
}
render() {
const variables = this.context.theme
? this.context.theme["@@shoutem.theme/themeStyle"].variables
: variable;
return (
<View>
<View>
<Text
onPress={this.showDatePicker.bind(this)}
style={[
this.props.textStyle,
{ padding: 10, color: variables.datePickerTextColor }
]}
>
{this.state.chosenDate
? this.state.chosenDate.getDate() +
"/" +
(this.state.chosenDate.getMonth() + 1) +
"/" +
+this.state.chosenDate.getFullYear()
: this.props.placeHolderText
? this.props.placeHolderText
: "Select Date"}
</Text>
<View>
<Modal
animationType={this.props.animationType}
transparent={this.props.modalTransparent} //from api
visible={this.state.modalVisible}
onRequestClose={() => {}}
>
<Text
onPress={() => this.setState({ modalVisible: false })}
style={{ backgroundColor: variables.datePickerBg, flex: 1 }}
/>
<DatePickerIOS
date={
this.state.chosenDate
? this.state.chosenDate
: this.state.defaultDate
}
onDateChange={this.setDate.bind(this)}
minimumDate={this.props.minimumDate}
maximumDate={this.props.maximumDate}
mode="date"
locale={this.props.locale}
timeZoneOffsetInMinutes={this.props.timeZoneOffsetInMinutes}
/>
</Modal>
</View>
</View>
</View>
);
}
}