From 137c8f8a0784f1d867f38e30f836d669e549d192 Mon Sep 17 00:00:00 2001 From: Athurg Gooth Date: Fri, 15 Sep 2023 21:48:52 +0800 Subject: [PATCH] chore: better date picker (#2220) * Add buttons to increase year in DatePicker * Show month with padding 0 to keep DatePicker size --- web/src/components/kit/DatePicker.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/web/src/components/kit/DatePicker.tsx b/web/src/components/kit/DatePicker.tsx index 5e73526e..d014bd6d 100644 --- a/web/src/components/kit/DatePicker.tsx +++ b/web/src/components/kit/DatePicker.tsx @@ -59,32 +59,30 @@ const DatePicker: React.FC = (props: DatePickerProps) => { handleDateStampChange(datestamp); }; - const handleChangeMonthBtnClick = (i: -1 | 1) => { - const year = firstDate.getFullYear(); - const month = firstDate.getMonth() + 1; - let nextDateStamp = 0; - if (month === 1 && i === -1) { - nextDateStamp = new Date(`${year - 1}/12/1`).getTime(); - } else if (month === 12 && i === 1) { - nextDateStamp = new Date(`${year + 1}/1/1`).getTime(); - } else { - nextDateStamp = new Date(`${year}/${month + i}/1`).getTime(); - } - setCurrentDateStamp(getMonthFirstDayDateStamp(nextDateStamp)); + const handleChangeMonthBtnClick = (i: number) => { + const nextDate = new Date(firstDate.getTime()); + nextDate.setMonth(nextDate.getMonth() + i); + setCurrentDateStamp(getMonthFirstDayDateStamp(nextDate.getTime())); }; return (
+ - {firstDate.getFullYear()}/{firstDate.getMonth() + 1} + {firstDate.getFullYear()}/{(firstDate.getMonth() + 1).toString().padStart(2, "0")} +