修复最大日期bug

This commit is contained in:
sijinhui 2024-02-21 13:30:14 +08:00
parent 7b94285387
commit 2a74190691

View File

@ -1,6 +1,12 @@
"use client"; "use client";
import React, { useEffect, useState, Dispatch, SetStateAction } from "react"; import React, {
useEffect,
useState,
useCallback,
Dispatch,
SetStateAction,
} from "react";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { DatePicker } from "@tremor/react"; import { DatePicker } from "@tremor/react";
@ -17,24 +23,35 @@ interface ComponentProps {
const maxDate = new Date(); const maxDate = new Date();
function DateSelectComponent({ currentDate, setCurrentDate }: ComponentProps) { function DateSelectComponent({ currentDate, setCurrentDate }: ComponentProps) {
const changeCurrentDate = useCallback(
(d: Date) => {
const new_d = new Date(
d.getFullYear(),
d.getMonth(),
d.getDate(),
0,
0,
0,
);
if (new_d <= maxDate) {
setCurrentDate(d);
}
},
[setCurrentDate],
);
// 增加键盘监听修改日期 // 增加键盘监听修改日期
useEffect(() => { useEffect(() => {
const keydownEvent = (e: KeyboardEvent) => { const keydownEvent = (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {
case "ArrowLeft": case "ArrowLeft":
if (currentDate) { if (currentDate) {
setCurrentDate(subDays(currentDate, 1)); changeCurrentDate(subDays(currentDate, 1));
} }
// console.log(currentDate)
break; break;
case "ArrowRight": case "ArrowRight":
if (currentDate) { if (currentDate) {
const temp_date = addDays(currentDate, 1); changeCurrentDate(addDays(currentDate, 1));
if (temp_date <= maxDate) {
setCurrentDate(temp_date);
} }
}
// console.log(currentDate)
break; break;
default: default:
break; break;
@ -44,7 +61,7 @@ function DateSelectComponent({ currentDate, setCurrentDate }: ComponentProps) {
return () => { return () => {
document.removeEventListener("keydown", keydownEvent); document.removeEventListener("keydown", keydownEvent);
}; };
}, [currentDate, setCurrentDate]); }, [changeCurrentDate, currentDate]);
return ( return (
<DatePicker <DatePicker
@ -52,7 +69,7 @@ function DateSelectComponent({ currentDate, setCurrentDate }: ComponentProps) {
value={currentDate} value={currentDate}
locale={zhCN} locale={zhCN}
defaultValue={new Date()} defaultValue={new Date()}
onValueChange={(d) => d && setCurrentDate(d)} onValueChange={(d) => d && changeCurrentDate(d)}
maxDate={maxDate} maxDate={maxDate}
/> />
); );