antd 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;