fix date inputs

src/components/proDatePicker/ProDatePicker.tsx

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

src/utils/constants.ts

@@ -47,7 +47,9 @@ export const THEME_STORAGE_KEY = "themeKey";
 export const USER_EMAIL = "userEmail";
 export const DEFAULT_LANGUAGE = "selectedLang";
 
-export const UI_DATE_FORMAT = "YYYY-MM-DD";
+export const SERVER_DATE_FORMAT = "YYYY-MM-DD";
+export const UI_DATE_FORMAT = "YYYY/MM/DD";
+export const UI_TIME_FORMAT = "HH:mm";
 
 export const CONTACTS_URL = "LT";
 export const FILTER_PARAMS = "";