日期范围选择器、账单筛选

src/components/Picker/CalendarDialog/DialogCalendarCard.tsx

@@ -28,6 +28,8 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
   const [selectedBackup, setSelectedBackup] = useState<Date[]>(
     Array.isArray(value) ? [...(value as Date[])] : [value as Date]
   );
+  const [current, setCurrent] = useState<Date>(new Date());
+  const [delta, setDelta] = useState(0);
   const calendarRef = useRef<CalendarUIRef>(null);
   const [type, setType] = useState<"year" | "month" | "time">("year");
   const [selectedHour, setSelectedHour] = useState(8);
@@ -56,11 +58,11 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
         setPendingJump({ year, month });
         setType("year");
         if (searchType === "range") {
-          const delta = calculateMonthDifference(
-            selected as Date,
+          calculateMonthDifference(
+            current,
             new Date(year, month - 1, 1)
           );
-          calendarRef.current?.gotoMonth(delta);
+
           return;
         }
         setSelected(new Date(year, month - 1, 1));
@@ -77,10 +79,10 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
         const minutes = minute.toString().padStart(2, "0");
         const finalDate = new Date(
           dayjs(selected as Date).format("YYYY-MM-DD") +
-            " " +
-            hours +
-            ":" +
-            minutes
+          " " +
+          hours +
+          ":" +
+          minutes
         );
         if (onChange) onChange(finalDate);
       }
@@ -92,12 +94,11 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
     if (!(date1 instanceof Date) || !(date2 instanceof Date)) {
       throw new Error("Both arguments must be Date objects");
     }
-
+    setCurrent(date1)
     let months = (date2.getFullYear() - date1.getFullYear()) * 12;
     months -= date1.getMonth();
     months += date2.getMonth();
-
-    return months;
+    setDelta(months);
   };
 
   const handleChange = (d: Date | Date[]) => {
@@ -106,9 +107,8 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
         if (d.length === 2) {
           return;
         } else if (d.length === 1) {
-          debugger;
           if (selectedBackup.length === 0 || selectedBackup.length === 2) {
-            setSelected([]);
+            setSelected([...d]);
             setSelectedBackup([...d]);
           } else {
             setSelected(
@@ -152,6 +152,10 @@ const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
       onClose();
     }
   };
+  useEffect(() => {
+    calendarRef.current?.gotoMonth(delta);
+  }, [delta])
+
   useEffect(() => {
     if (visible && value) {
       setSelected(value || new Date());

src/components/Picker/CalendarUI/CalendarUI.tsx

@@ -83,13 +83,11 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
       jumpTo: (year: number, month: number) => {
         calendarRef.current?.jumpTo(year, month);
       },
-      gotoMonth: (delta: number) => {
-        gotoMonth(delta);
-      },
+      gotoMonth,
     }));
 
     const handleDateChange = (newValue: any) => {
-      console.log("aaaaaaaaaaaaaaaaaaaaaa", newValue);
+      if (type === "range") return;
       setSelectedValue(newValue);
       onChange?.(newValue as any);
     };