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
|
import React from 'react';
import { RkPicker } from 'react-native-ui-kitten';
export const DatePart = Object.freeze({ YEAR: 1, MONTH: 2, DAY: 3 });
export class DatePicker extends React.Component {
componentName = 'DatePicker';
state = {
data: {
days: DatePicker.generateArrayFromRange(1, 31),
years: DatePicker.generateArrayFromRange(2000, 2030),
months: [
{ key: 1, value: 'Jun' }, { key: 2, value: 'Feb' },
{ key: 3, value: 'Mar' }, { key: 4, value: 'Apr' },
{ key: 5, value: 'May' }, { key: 6, value: 'Jun' },
{ key: 7, value: 'Jul' }, { key: 8, value: 'Aug' },
{ key: 9, value: 'Sep' }, { key: 10, value: 'Oct' },
{ key: 11, value: 'Nov' }, { key: 12, value: 'Dec' },
],
},
};
onDatePickerConfirm = (date) => {
let resultDate = {};
if (this.props.customDateParts) {
let i = 0;
if (this.props.customDateParts.includes(DatePart.MONTH)) {
resultDate.month = date[i += 1];
}
if (this.props.customDateParts.includes(DatePart.DAY)) {
resultDate.day = date[i += 1];
}
if (this.props.customDateParts.includes(DatePart.YEAR)) {
resultDate.year = date[i];
}
} else {
resultDate = { month: date[0], day: date[1], year: date[2] };
}
this.props.onConfirm(resultDate);
};
static generateArrayFromRange(start, finish) {
return Array(...Array((finish - start) + 1)).map((_, i) => start + i);
}
findElementByKey(key, array) {
let element = array[0];
array.forEach((value) => {
if (value.key === key) element = value;
});
return element;
}
render() {
const {
onConfirm,
selectedYear,
selectedMonth,
selectedDay,
customDateParts,
...props
} = this.props;
let data = [this.state.data.months, this.state.data.days, this.state.data.years];
let selectedOptions = [
this.findElementByKey(selectedMonth, this.state.data.months),
selectedDay || 1,
selectedYear || 2000,
];
if (customDateParts) {
selectedOptions = [];
data = [];
if (customDateParts.includes(DatePart.MONTH)) {
data.push(this.state.data.months);
selectedOptions.push(this.findElementByKey(selectedMonth, this.state.data.months));
}
if (customDateParts.includes(DatePart.DAY)) {
data.push(this.state.data.days);
selectedOptions.push(selectedDay || 1);
}
if (customDateParts.includes(DatePart.YEAR)) {
data.push(this.state.data.years);
selectedOptions.push(selectedYear || 2000);
}
}
return (
<RkPicker
rkType='highlight'
title='Set Date'
data={data}
onConfirm={this.onDatePickerConfirm}
selectedOptions={selectedOptions}
optionRkType='subtitle small'
selectedOptionRkType='header4'
titleTextRkType='header4'
cancelTextRkType='light'
confirmTextRkType=''
{...props}
/>
);
}
}
|
