自定义组件
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;