usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-01-31 09:37:51 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: better date picker (#2220)

Browse source 
* Add buttons to increase year in DatePicker

* Show month with padding 0 to keep DatePicker size
This commit is contained in:
Athurg Gooth 2023-09-15 21:48:52 +08:00 committed by GitHub
parent 0c0c72c3ca
commit 137c8f8a07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
web/src/components/kit/DatePicker.tsx
View file

@ -59,32 +59,30 @@ const DatePicker: React.FC<DatePickerProps> = (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 (
<div className={`date-picker-wrapper ${className}`}>
<div className="date-picker-header">
<Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-12)}>
<Icon.ChevronsLeft className="icon-img" />
</Button>
<Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(-1)}>
<Icon.ChevronLeft className="icon-img" />
</Button>
<span className="normal-text">
{firstDate.getFullYear()}/{firstDate.getMonth() + 1}
{firstDate.getFullYear()}/{(firstDate.getMonth() + 1).toString().padStart(2, "0")}
</span>
<Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(1)}>
<Icon.ChevronRight className="icon-img" />
</Button>
<Button variant="plain" color="neutral" onClick={() => handleChangeMonthBtnClick(12)}>
<Icon.ChevronsRight className="icon-img" />
</Button>
</div>
<div className="date-picker-day-container">
<div className="date-picker-day-header">