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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import React, {Component} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';
import DatePicker from 'react-native-datepicker';
import {
WIDTHXD,
HEIGHTXD,
getFontXD,
WIDTHXDICON,
} from '../../Config/Functions';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';
/**
* This Function to choice date
* @callback onValueChange value of date you choice
* @param value value of date you choice
* @param containerStyle custom containerStyle of view
* @param textStyle style value of date
* @param placeholder value of placeholder
* @param width width of datePicker
* @param date value of date you choice
* @param enableEdit status allow edit
* other you can make minDate,maxDate... with props of libary react-native-datepicker
*/
class PickerDate extends Component {
state = {
date: new Date(),
};
/**
* This Function to set date
* @param date value of date you choice
*/
onChangeDate = (date) => {
this.setState({date});
};
render() {
const {
valueString,
onValueChange,
value,
containerStyle,
textStyle,
placeholder,
width,
disabled,
title,
} = this.props;
return (
<View style={{marginVertical: 5}}>
<Text
style={{
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
}}>
{title}
</Text>
<View
style={[
styles.inputBox,
containerStyle !== null && containerStyle,
width && {width},
]}>
{disabled ? (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
flex: 1,
paddingHorizontal: 10,
}}>
<Text
style={{
...styles.textDate,
...textStyle,
paddingVertical: 0,
marginRight: WIDTHXD(15),
}}>
{valueString}
</Text>
<Icon name={'calendar'} size={22} color={'#929292'} />
</View>
) : (
<DatePicker
confirmBtnText={'OK'}
cancelBtnText={'Cancel'}
locale="vi"
style={[
{paddingHorizontal: 0, borderWidth: 0, width: WIDTHXD(960)},
width && {width: width - WIDTHXD(30)},
]}
date={value}
mode="date"
placeholder={placeholder !== null && placeholder}
format="DD/MM/YYYY" // you can change format of date in date picker
git
iconComponent={
<Icon name={'calendar'} size={22} color={'#929292'} />
} // to custom icon
customStyles={{
dateInput: {
flex: 5,
marginLeft: WIDTHXD(0),
borderWidth: 0,
color: R.colors.black0,
},
dateText: {
...styles.textDate,
},
}}
onDateChange={(date) => {
this.onChangeDate(date);
onValueChange && onValueChange(date); // return value of date, Fuction from parent
}}
{...this.props}
/>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
inputBox: {
borderRadius: WIDTHXD(20),
height: HEIGHTXD(120),
borderWidth: 0.3,
borderColor: R.colors.borderGray,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
// paddingVertical: HEIGHTXD(17),
backgroundColor: 'white',
},
textDate: {
fontSize: getFontXD(42),
color: R.colors.black0,
alignSelf: 'flex-start',
paddingLeft: WIDTHXD(16),
paddingVertical: HEIGHTXD(25),
},
});
export default React.memo(PickerDate);