diff --git a/src/components/proDatePicker/ProDatePicker.tsx b/src/components/proDatePicker/ProDatePicker.tsx
index 6205cdb..27d3d9e 100644
--- a/src/components/proDatePicker/ProDatePicker.tsx
+++ b/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;
diff --git a/src/components/proDatePicker/ProTimePicker.tsx b/src/components/proDatePicker/ProTimePicker.tsx
new file mode 100644
index 0000000..9d57e7c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index e71f88f..bcfda00 100644
--- a/src/utils/constants.ts
+++ b/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 = "";
@@ -103,4 +105,4 @@ export const LOGIN_URL = `${API_BASE_URL}login`;
 export const SEND_OTP_URL = `${API_BASE_URL}sendOtp`;
 export const CONFIRM_OTP_URL = `${API_BASE_URL}confirmOtp`;
 export const PAYMENT_CONFIRMATION_URL = `https://menu.fascano.com/payment/confirmation`;
-export const DISCOUNT_URL = `${BASE_URL}getDiscount`;
\ No newline at end of file
+export const DISCOUNT_URL = `${BASE_URL}getDiscount`;