修改日历组件下滑位置

src/components/Picker/DayDialog/index.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useRef } from "react";
+import CommonPopup from "@/components/CommonPopup";
+import { View } from "@tarojs/components";
+import CalendarUI, {
+  CalendarUIRef,
+} from "@/components/Picker/CalendarUI/CalendarUI";
+import dayjs from "dayjs";
+import styles from "../CalendarDialog/index.module.scss";
+export interface DayDialogProps {
+  value?: Date | Date[];
+  searchType?: "single" | "range" | "multiple";
+  onChange?: (date: string | string[]) => void;
+  visible: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+}
+
+const DayDialog: React.FC<DayDialogProps> = ({
+  visible,
+  searchType,
+  onClose,
+  title,
+  value,
+  onChange,
+}) => {
+  const [selected, setSelected] = useState<Date | Date[]>(value || new Date());
+  const [selectedBackup, setSelectedBackup] = useState<Date[]>(
+    Array.isArray(value) ? [...(value as Date[])] : [value as Date]
+  );
+  const calendarRef = useRef<CalendarUIRef>(null);
+  const [type, setType] = useState<"year" | "month" | "time">("year");
+  const [pendingJump, setPendingJump] = useState<{
+    year: number;
+    month: number;
+  } | null>(null);
+  const handleConfirm = () => {
+    console.log(selected, 'selectedselected');
+    const finalDate = dayjs(selected as Date).format("YYYY-MM-DD");
+      if (onChange){
+        onChange(finalDate)
+      }
+      onClose();
+  };
+  const dialogClose = () => {
+    setType("year");
+    onClose();
+  }
+
+  const handleChange = (d: Date | Date[]) => {
+    if (searchType === "range") {
+      if (Array.isArray(d)) {
+        if (d.length === 2) {
+          return;
+        } else if (d.length === 1) {
+          if (selectedBackup.length === 0 || selectedBackup.length === 2) {
+            setSelected([...d]);
+            setSelectedBackup([...d]);
+          } else {
+            setSelected(
+              [...selectedBackup, d[0]].sort(
+                (a, b) => a.getTime() - b.getTime()
+              )
+            );
+            setSelectedBackup([]);
+          }
+        }
+        return;
+      }
+    }
+    if (Array.isArray(d)) {
+      setSelected(d[0]);
+    } else {
+      setSelected(d);
+    }
+  };
+  const onHeaderClick = (date: Date) => {
+    console.log("onHeaderClick", date);
+    setSelected(date);
+    setType("month");
+  };
+  const getConfirmText = () => {
+    return "完成"
+  };
+  const onCancel = () => {
+    onClose();
+  };
+
+  useEffect(() => {
+    if (visible && value) {
+      setSelected(value || new Date());
+    }
+  }, [value, visible]);
+
+  useEffect(() => {
+    if (type === "year" && pendingJump && calendarRef.current) {
+      calendarRef.current.jumpTo(pendingJump.year, pendingJump.month);
+      setPendingJump(null);
+    }
+  }, [type, pendingJump]);
+
+
+  return (
+    <CommonPopup
+      visible={visible}
+      onClose={dialogClose}
+      onCancel={onCancel}
+      showHeader={!!title}
+      title={title}
+      hideFooter={false}
+      cancelText="取消"
+      confirmText={getConfirmText()}
+      onConfirm={handleConfirm}
+      className={styles["calendar-popup"]}
+      position="bottom"
+      round
+      zIndex={1000}
+    >
+      <View className={styles["calendar-container"]}>
+        <CalendarUI
+            ref={calendarRef}
+            type={searchType}
+            value={selected}
+            onChange={handleChange}
+            showQuickActions={false}
+            onHeaderClick={onHeaderClick}
+            />
+        </View>
+    </CommonPopup>
+  );
+};
+
+export default DayDialog;