Ant Design 组件库的 DatePicker 日期 与 时间 分开选择

自定义组件

import { DatePicker } from "antd";
import dayjs from "dayjs";
import { FC, useRef } from "react";

/**
 * 日期 与 时间 分开选择
 *
 * 版本号: 
 * "antd": "^5.17.4",
 * "dayjs": "^1.11.11",
 * "react": "^18.3.1",
 * "react-dom": "^18.3.1",
 * 
 * @param props
 * @returns
 */
let MyDateTimePicker: FC<{
  "aria-required"?: boolean;
  id?: string; // antd Form 文档中说是用来定位的, 滚动到指定 dom, (scrollToField / scrollToFirstError)
  value?: dayjs.Dayjs;
  onChange?: ((date: dayjs.Dayjs | null, dateString: string | string[]) => void) | undefined;
}> = (inProps) => {

  // console.log(inProps);
  let { onChange, id, ...props } = inProps;
  const dateRef = useRef(props.value);

  /**
   * 包一层 onChange,
   * 将 2 个组件的数据合并到一起
   * (因为 antd DatePicker["date"] 会把 时分秒 全部设置为 0 )
   * @param v 当前选择的值 (dayjs对象)
   * @param type 组件的类型
   */
  let handleDateTimeChange = (v: dayjs.Dayjs, type: "date" | "time") => {
  
    // console.log(type, v);
    
    if (v == undefined) {
    
      // 清空表单, 由于两个组件都绑定的 props.value , 所以会一起清空
      dateRef.current = undefined;
      
    } else {
    
      // 如果表单是空的,就获取当前的日期时间, 去操作
      if (dateRef.current == undefined) {
      
        dateRef.current = dayjs();
        
      }
      if (type == "date") {
      
        dateRef.current = dateRef.current
          ?.set("year", v.year()) // 年
          .set("month", v.month()) // 月
          .set("date", v.date()); // 日
          
      } else if (type == "time") {
      
        dateRef.current = dateRef.current
          ?.set("hour", v.hour()) // 时
          .set("minute", v.minute()) // 分
          .set("second", v.second()); // 秒
          
      }
      
    }
    
    // 模仿原生 antd DatePicker 的值
    onChange?.(dateRef.current ?? null, dateRef.current?.toDate().toLocaleString() ?? "");
  };

  return (
    <div className="space-x-2" id={id}>
      <DatePicker
        {...props}
        picker="date"
        onChange={(v) => {
          handleDateTimeChange(v, "date");
        }}
      />
      <DatePicker
        {...props}
        picker="time"
        onChange={(v) => {
          handleDateTimeChange(v, "time");
        }}
      />
    </div>
  );
};

export default MyDateTimePicker;