1  import { DatePicker } from "antd";
 2  import dayjs from "dayjs";
 3  import advancedFormat from "dayjs/plugin/advancedFormat";
 4  import timezone from "dayjs/plugin/timezone";
 5  import utc from "dayjs/plugin/utc";
 6  
 7  dayjs.extend(utc);
 8  dayjs.extend(timezone);
 9  dayjs.extend(advancedFormat);
10  
11  // Localized date time format with timezone
12  const dateTimeFormat = "YYYY-MM-DD HH:mm:ss";
13  
14  export function DateTimePicker<T extends string | dayjs.Dayjs>(props: { value?: T; onChange?: (value?: T) => void }) {
15    return (
16      <DatePicker
17        showTime={{ use12Hours: false }}
18        format={dateTimeFormat}
19        value={props.value ? dayjs(props.value) : undefined}
20        onChange={(value) => {
21          if (value) {
22            if (typeof props.value === "string") {
23              props.onChange?.(value.toISOString() as T);
24            } else {
25              props.onChange?.(value as T);
26            }
27          } else {
28            props.onChange?.(undefined);
29          }
30        }}
31      />
32    );
33  }