自定义组件
import { DatePicker } from "antd";
import dayjs from "dayjs";
import { FC, useRef } from "react";
let MyDateTimePicker: FC<{
"aria-required"?: boolean;
id?: string;
value?: dayjs.Dayjs;
onChange?: ((date: dayjs.Dayjs | null, dateString: string | string[]) => void) | undefined;
}> = (inProps) => {
let { onChange, id, ...props } = inProps;
const dateRef = useRef(props.value);
let handleDateTimeChange = (v: dayjs.Dayjs, type: "date" | "time") => {
if (v == undefined) {
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());
}
}
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;