fix date inputs

src/components/proDatePicker/ProDatePicker.tsx

@@ -1,43 +1,33 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+import { FormItemProps, Form, DatePicker } from "antd";
+import dayjs from "dayjs";
 
-import { UI_DATE_FORMAT } from "@/lib/constants";
-import { DatePicker } from "antd";
-import { SizeType } from "antd/es/config-provider/SizeContext";
-import { Dayjs } from "dayjs";
-import { CSSProperties, FocusEventHandler, KeyboardEventHandler } from "react";
+import type { DatePickerProps } from "antd";
+import { UI_DATE_FORMAT, SERVER_DATE_FORMAT } from "utils/constants.ts";
 
-export interface ProDatePickerProps {
-  style?: CSSProperties;
-  format?: string;
-  defaultValue?: Dayjs;
-  value?: Dayjs;
-  size?: SizeType;
-  disabled?: boolean;
-  onChange?: (value: Dayjs | null, dateString: string) => void;
-  placeholder?: string;
-  picker?: "date";
-  ref?: any;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onKeyDown?: KeyboardEventHandler;
-  className?: string;
-  getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-  defaultOpen?: boolean;
-  allowClear?: boolean;
-}
-
-function ProDatePicker(props: ProDatePickerProps) {
+export default function ProDateFormInput({
+  formItemProps,
+  pickerProps,
+}: {
+  formItemProps: FormItemProps;
+  pickerProps: DatePickerProps;
+}) {
   return (
-    <DatePicker
-      allowClear={false}
-      format={UI_DATE_FORMAT}
-      style={{ width: "100%" }}
-      disabled={props.disabled}
-      onChange={props.onChange}
-      suffixIcon={null}
-      {...props}
-    />
+    <Form.Item
+      getValueProps={(value) => ({
+        value: value ? dayjs(value, SERVER_DATE_FORMAT) : undefined,
+      })}
+      normalize={(value) =>
+        value ? `${dayjs(value).format(SERVER_DATE_FORMAT)}` : undefined
+      }
+      {...formItemProps}
+    >
+      <DatePicker
+        format={{
+          format: UI_DATE_FORMAT,
+          type: "mask",
+        }}
+        {...pickerProps}
+      />
+    </Form.Item>
   );
 }
-
-export default ProDatePicker;

src/components/proDatePicker/ProTimePicker.tsx

@@ -0,0 +1,28 @@
+import { FormItemProps, Form, TimePicker } from "antd";
+import type { TimePickerProps } from "antd";
+
+import dayjs from "dayjs";
+import { UI_TIME_FORMAT } from "utils/constants.ts";
+
+export default function TimeFormInput({
+  formItemProps,
+  pickerProps,
+}: {
+  formItemProps: FormItemProps;
+  pickerProps: TimePickerProps;
+}) {
+  return (
+    <Form.Item
+      {...formItemProps}
+      getValueProps={(value) => ({
+        value: value ? dayjs(value, UI_TIME_FORMAT) : null,
+      })}
+      normalize={(value) =>
+        value ? `${dayjs(value).format(UI_TIME_FORMAT)}` : ""
+      }
+      {...formItemProps}
+    >
+      <TimePicker format={UI_TIME_FORMAT} {...pickerProps} />
+    </Form.Item>
+  );
+}