@redneckz/wildless-cms-uni-blocks 0.14.729 → 0.14.730
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/bundle.umd.js +22 -8
- package/bundle/bundle.umd.min.js +1 -1
- package/dist/ui-kit/DatePicker/DatePickerInput.js +21 -7
- package/dist/ui-kit/DatePicker/DatePickerInput.js.map +1 -1
- package/lib/components/OfficesAtmsMap/OfficesAtmsMapLayout.d.ts +1 -1
- package/lib/ui-kit/DatePicker/DatePickerInput.js +21 -7
- package/lib/ui-kit/DatePicker/DatePickerInput.js.map +1 -1
- package/mobile/bundle/bundle.umd.js +22 -8
- package/mobile/bundle/bundle.umd.min.js +1 -1
- package/mobile/dist/ui-kit/DatePicker/DatePickerInput.js +21 -7
- package/mobile/dist/ui-kit/DatePicker/DatePickerInput.js.map +1 -1
- package/mobile/lib/ui-kit/DatePicker/DatePickerInput.js +21 -7
- package/mobile/lib/ui-kit/DatePicker/DatePickerInput.js.map +1 -1
- package/mobile/src/ui-kit/DatePicker/DatePickerInput.tsx +37 -7
- package/package.json +1 -1
- package/src/ui-kit/DatePicker/DatePickerInput.tsx +37 -7
|
@@ -24,10 +24,7 @@ exports.DatePickerInput = (0, uni_jsx_1.JSX)(({ setSelectedMonth, setSelectedYea
|
|
|
24
24
|
};
|
|
25
25
|
const onBlur = () => {
|
|
26
26
|
if (checkIsValidDate(inputValue)) {
|
|
27
|
-
|
|
28
|
-
onChange?.(new Date(Number(year), Number(month) - 1, Number(day)));
|
|
29
|
-
setSelectedMonth(Number(month) - 1);
|
|
30
|
-
setSelectedYear(Number(year));
|
|
27
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
31
28
|
}
|
|
32
29
|
else {
|
|
33
30
|
setInputValue(value || '');
|
|
@@ -42,6 +39,9 @@ exports.DatePickerInput = (0, uni_jsx_1.JSX)(({ setSelectedMonth, setSelectedYea
|
|
|
42
39
|
(0, hooks_1.useEffect)(() => {
|
|
43
40
|
setInputValue(value || '');
|
|
44
41
|
}, [value]);
|
|
42
|
+
(0, hooks_1.useEffect)(() => {
|
|
43
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
44
|
+
}, [inputValue]);
|
|
45
45
|
return ((0, jsx_runtime_1.jsxs)("div", { onClick: onInputClick, className: (0, style_1.style)('relative', className), children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, className: "h-full w-full px-m text-l text-black focus-visible:outline-none", value: inputValue, type: "text", onChange: handleChange, onBlur: onBlur, disabled: disabled }), disabled ? null : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: "mr-s", ...ICON_PROPS })] }));
|
|
46
46
|
});
|
|
47
47
|
const isValidYear = (year) => Number(year) >= getYears_1.START_YEAR && Number(year) <= new Date().getFullYear();
|
|
@@ -56,11 +56,25 @@ const checkIsValidDate = (date) => {
|
|
|
56
56
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
57
57
|
maxDateOfMonth++;
|
|
58
58
|
}
|
|
59
|
-
|
|
60
|
-
return true;
|
|
61
|
-
}
|
|
59
|
+
return Number(day) > 0 && Number(day) <= maxDateOfMonth;
|
|
62
60
|
}
|
|
63
61
|
}
|
|
64
62
|
return false;
|
|
65
63
|
};
|
|
64
|
+
const parseDate = (inputValue) => {
|
|
65
|
+
const [dayStr, monthStr, yearStr] = inputValue.split('.');
|
|
66
|
+
return {
|
|
67
|
+
day: Number(dayStr),
|
|
68
|
+
month: Number(monthStr) - 1,
|
|
69
|
+
year: Number(yearStr),
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
const updateSelectedDate = ({ inputValue, setSelectedMonth, setSelectedYear, onChange, }) => {
|
|
73
|
+
if (checkIsValidDate(inputValue)) {
|
|
74
|
+
const { day, month, year } = parseDate(inputValue);
|
|
75
|
+
setSelectedMonth(month);
|
|
76
|
+
setSelectedYear(year);
|
|
77
|
+
onChange?.(new Date(year, month, day));
|
|
78
|
+
}
|
|
79
|
+
};
|
|
66
80
|
//# sourceMappingURL=DatePickerInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerInput.js","sourceRoot":"","sources":["../../../src/ui-kit/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AACxC,uDAA0E;AAE1E,qEAAkE;AAClE,6CAA0C;AAC1C,uCAAoC;AAEpC,yCAAwC;AAExC,MAAM,UAAU,GAAgF;IAC9F,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;CACb,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePickerInput.js","sourceRoot":"","sources":["../../../src/ui-kit/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,10 +22,7 @@ export const DatePickerInput = JSX(({ setSelectedMonth, setSelectedYear, classNa
|
|
|
22
22
|
};
|
|
23
23
|
const onBlur = () => {
|
|
24
24
|
if (checkIsValidDate(inputValue)) {
|
|
25
|
-
|
|
26
|
-
onChange?.(new Date(Number(year), Number(month) - 1, Number(day)));
|
|
27
|
-
setSelectedMonth(Number(month) - 1);
|
|
28
|
-
setSelectedYear(Number(year));
|
|
25
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
29
26
|
}
|
|
30
27
|
else {
|
|
31
28
|
setInputValue(value || '');
|
|
@@ -40,6 +37,9 @@ export const DatePickerInput = JSX(({ setSelectedMonth, setSelectedYear, classNa
|
|
|
40
37
|
useEffect(() => {
|
|
41
38
|
setInputValue(value || '');
|
|
42
39
|
}, [value]);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
42
|
+
}, [inputValue]);
|
|
43
43
|
return (_jsxs("div", { onClick: onInputClick, className: style('relative', className), children: [_jsx("input", { ref: ref, className: "h-full w-full px-m text-l text-black focus-visible:outline-none", value: inputValue, type: "text", onChange: handleChange, onBlur: onBlur, disabled: disabled }), disabled ? null : _jsx(Icon, { className: "mr-s", ...ICON_PROPS })] }));
|
|
44
44
|
});
|
|
45
45
|
const isValidYear = (year) => Number(year) >= START_YEAR && Number(year) <= new Date().getFullYear();
|
|
@@ -54,11 +54,25 @@ const checkIsValidDate = (date) => {
|
|
|
54
54
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
55
55
|
maxDateOfMonth++;
|
|
56
56
|
}
|
|
57
|
-
|
|
58
|
-
return true;
|
|
59
|
-
}
|
|
57
|
+
return Number(day) > 0 && Number(day) <= maxDateOfMonth;
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
60
|
return false;
|
|
63
61
|
};
|
|
62
|
+
const parseDate = (inputValue) => {
|
|
63
|
+
const [dayStr, monthStr, yearStr] = inputValue.split('.');
|
|
64
|
+
return {
|
|
65
|
+
day: Number(dayStr),
|
|
66
|
+
month: Number(monthStr) - 1,
|
|
67
|
+
year: Number(yearStr),
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
const updateSelectedDate = ({ inputValue, setSelectedMonth, setSelectedYear, onChange, }) => {
|
|
71
|
+
if (checkIsValidDate(inputValue)) {
|
|
72
|
+
const { day, month, year } = parseDate(inputValue);
|
|
73
|
+
setSelectedMonth(month);
|
|
74
|
+
setSelectedYear(year);
|
|
75
|
+
onChange?.(new Date(year, month, day));
|
|
76
|
+
}
|
|
77
|
+
};
|
|
64
78
|
//# sourceMappingURL=DatePickerInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerInput.js","sourceRoot":"","sources":["../../../src/ui-kit/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,UAAU,GAAgF;IAC9F,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;CACb,CAAC;
|
|
1
|
+
{"version":3,"file":"DatePickerInput.js","sourceRoot":"","sources":["../../../src/ui-kit/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,UAAU,GAAgF;IAC9F,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;CACb,CAAC;AAmBF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAChC,CAAC,EAAE,gBAAgB,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IACvF,MAAM,GAAG,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,KAAK,IAAI,EAAE,CAAC,CAAC;IAElE,MAAM,YAAY,GAAG,CAAC,EAAmC,EAAE,EAAE;QAC3D,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAC7B,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE;YAC/C,aAAa,CAAC,iBAAiB,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;SACrD;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,IAAI,gBAAgB,CAAC,UAAU,CAAC,EAAE;YAChC,kBAAkB,CAAC,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;SACjF;aAAM;YACL,aAAa,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;YACxB,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACrB;QACD,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;IAClF,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,eAAK,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,CAAC,UAAU,EAAE,SAAS,CAAC,aACjE,gBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GAClB,EACD,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,SAAS,EAAC,MAAM,KAAK,UAAU,GAAI,IACxD,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE,CACnC,MAAM,CAAC,IAAI,CAAC,IAAI,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;AAEzE,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAEhF,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE;IACxC,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3C,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE;QACrB,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;YACvB,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YACjE,IAAI,cAAc,GAAG,CAAC,CAAC;YACvB,OAAO,WAAW,CAAC,QAAQ,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBACnD,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;gBAC/C,cAAc,EAAE,CAAC;aAClB;YAED,OAAO,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,cAAc,CAAC;SACzD;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,UAAkB,EAAE,EAAE;IACvC,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE1D,OAAO;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAC3B,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC;KACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,QAAQ,GACgB,EAAE,EAAE;IAC5B,IAAI,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAChC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;QACnD,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;KACxC;AACH,CAAC,CAAC"}
|
|
@@ -24,6 +24,13 @@ interface DatePickerInputProps {
|
|
|
24
24
|
disabled?: boolean;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
interface UpdateSelectedDateProps {
|
|
28
|
+
inputValue: string;
|
|
29
|
+
setSelectedMonth: (month: number) => void;
|
|
30
|
+
setSelectedYear: (year: number) => void;
|
|
31
|
+
onChange?: (value: Date) => void;
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
export const DatePickerInput = JSX<DatePickerInputProps>(
|
|
28
35
|
({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick }) => {
|
|
29
36
|
const ref = useRef<HTMLInputElement | null>(null);
|
|
@@ -38,10 +45,7 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
|
|
|
38
45
|
|
|
39
46
|
const onBlur = () => {
|
|
40
47
|
if (checkIsValidDate(inputValue)) {
|
|
41
|
-
|
|
42
|
-
onChange?.(new Date(Number(year), Number(month) - 1, Number(day)));
|
|
43
|
-
setSelectedMonth(Number(month) - 1);
|
|
44
|
-
setSelectedYear(Number(year));
|
|
48
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
45
49
|
} else {
|
|
46
50
|
setInputValue(value || '');
|
|
47
51
|
}
|
|
@@ -58,6 +62,10 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
|
|
|
58
62
|
setInputValue(value || '');
|
|
59
63
|
}, [value]);
|
|
60
64
|
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
67
|
+
}, [inputValue]);
|
|
68
|
+
|
|
61
69
|
return (
|
|
62
70
|
<div onClick={onInputClick} className={style('relative', className)}>
|
|
63
71
|
<input
|
|
@@ -92,11 +100,33 @@ const checkIsValidDate = (date: string) => {
|
|
|
92
100
|
maxDateOfMonth++;
|
|
93
101
|
}
|
|
94
102
|
|
|
95
|
-
|
|
96
|
-
return true;
|
|
97
|
-
}
|
|
103
|
+
return Number(day) > 0 && Number(day) <= maxDateOfMonth;
|
|
98
104
|
}
|
|
99
105
|
}
|
|
100
106
|
|
|
101
107
|
return false;
|
|
102
108
|
};
|
|
109
|
+
|
|
110
|
+
const parseDate = (inputValue: string) => {
|
|
111
|
+
const [dayStr, monthStr, yearStr] = inputValue.split('.');
|
|
112
|
+
|
|
113
|
+
return {
|
|
114
|
+
day: Number(dayStr),
|
|
115
|
+
month: Number(monthStr) - 1,
|
|
116
|
+
year: Number(yearStr),
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const updateSelectedDate = ({
|
|
121
|
+
inputValue,
|
|
122
|
+
setSelectedMonth,
|
|
123
|
+
setSelectedYear,
|
|
124
|
+
onChange,
|
|
125
|
+
}: UpdateSelectedDateProps) => {
|
|
126
|
+
if (checkIsValidDate(inputValue)) {
|
|
127
|
+
const { day, month, year } = parseDate(inputValue);
|
|
128
|
+
setSelectedMonth(month);
|
|
129
|
+
setSelectedYear(year);
|
|
130
|
+
onChange?.(new Date(year, month, day));
|
|
131
|
+
}
|
|
132
|
+
};
|
package/package.json
CHANGED
|
@@ -24,6 +24,13 @@ interface DatePickerInputProps {
|
|
|
24
24
|
disabled?: boolean;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
interface UpdateSelectedDateProps {
|
|
28
|
+
inputValue: string;
|
|
29
|
+
setSelectedMonth: (month: number) => void;
|
|
30
|
+
setSelectedYear: (year: number) => void;
|
|
31
|
+
onChange?: (value: Date) => void;
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
export const DatePickerInput = JSX<DatePickerInputProps>(
|
|
28
35
|
({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick }) => {
|
|
29
36
|
const ref = useRef<HTMLInputElement | null>(null);
|
|
@@ -38,10 +45,7 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
|
|
|
38
45
|
|
|
39
46
|
const onBlur = () => {
|
|
40
47
|
if (checkIsValidDate(inputValue)) {
|
|
41
|
-
|
|
42
|
-
onChange?.(new Date(Number(year), Number(month) - 1, Number(day)));
|
|
43
|
-
setSelectedMonth(Number(month) - 1);
|
|
44
|
-
setSelectedYear(Number(year));
|
|
48
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
45
49
|
} else {
|
|
46
50
|
setInputValue(value || '');
|
|
47
51
|
}
|
|
@@ -58,6 +62,10 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
|
|
|
58
62
|
setInputValue(value || '');
|
|
59
63
|
}, [value]);
|
|
60
64
|
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
updateSelectedDate({ inputValue, setSelectedMonth, setSelectedYear, onChange });
|
|
67
|
+
}, [inputValue]);
|
|
68
|
+
|
|
61
69
|
return (
|
|
62
70
|
<div onClick={onInputClick} className={style('relative', className)}>
|
|
63
71
|
<input
|
|
@@ -92,11 +100,33 @@ const checkIsValidDate = (date: string) => {
|
|
|
92
100
|
maxDateOfMonth++;
|
|
93
101
|
}
|
|
94
102
|
|
|
95
|
-
|
|
96
|
-
return true;
|
|
97
|
-
}
|
|
103
|
+
return Number(day) > 0 && Number(day) <= maxDateOfMonth;
|
|
98
104
|
}
|
|
99
105
|
}
|
|
100
106
|
|
|
101
107
|
return false;
|
|
102
108
|
};
|
|
109
|
+
|
|
110
|
+
const parseDate = (inputValue: string) => {
|
|
111
|
+
const [dayStr, monthStr, yearStr] = inputValue.split('.');
|
|
112
|
+
|
|
113
|
+
return {
|
|
114
|
+
day: Number(dayStr),
|
|
115
|
+
month: Number(monthStr) - 1,
|
|
116
|
+
year: Number(yearStr),
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const updateSelectedDate = ({
|
|
121
|
+
inputValue,
|
|
122
|
+
setSelectedMonth,
|
|
123
|
+
setSelectedYear,
|
|
124
|
+
onChange,
|
|
125
|
+
}: UpdateSelectedDateProps) => {
|
|
126
|
+
if (checkIsValidDate(inputValue)) {
|
|
127
|
+
const { day, month, year } = parseDate(inputValue);
|
|
128
|
+
setSelectedMonth(month);
|
|
129
|
+
setSelectedYear(year);
|
|
130
|
+
onChange?.(new Date(year, month, day));
|
|
131
|
+
}
|
|
132
|
+
};
|