From 6d319900d640df6da7e7646a14ea6bfbb2018fd9 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 3 Jun 2025 09:24:38 +0800
Subject: [PATCH] fix: date format

---
 web/src/components/DateTimeInput.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/components/DateTimeInput.tsx b/web/src/components/DateTimeInput.tsx
index 8a380101..0f70da3f 100644
--- a/web/src/components/DateTimeInput.tsx
+++ b/web/src/components/DateTimeInput.tsx
@@ -1,10 +1,11 @@
+import dayjs from "dayjs";
 import { isEqual } from "lodash-es";
 import toast from "react-hot-toast";
 import { cn } from "@/utils";
 
-// Helper function to convert Date to local datetime string.
-const toLocalDateTimeString = (date: Date | undefined): string => {
-  return date?.toLocaleString() || "";
+// convert Date to datetime string.
+const formatDate = (date: Date | undefined): string => {
+  return dayjs(date).format("M/D/YYYY, H:mm:ss");
 };
 
 interface Props {
@@ -23,7 +24,7 @@ const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => {
         !isEqual(value, originalValue) && "border-gray-300 dark:border-zinc-700",
         "border",
       )}
-      defaultValue={toLocalDateTimeString(value)}
+      defaultValue={formatDate(value)}
       onBlur={(e) => {
         const inputValue = e.target.value;
         if (inputValue) {
@@ -31,12 +32,12 @@ const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => {
           if (!isNaN(date.getTime())) {
             onChange(date);
           } else {
-            toast.error("Invalid datetime format. Use format: 2023-12-31T23:59:59");
-            e.target.value = toLocalDateTimeString(value);
+            toast.error("Invalid datetime format. Use format: 12/31/2023, 23:59:59");
+            e.target.value = formatDate(value);
           }
         }
       }}
-      placeholder="YYYY-MM-DDTHH:mm:ss"
+      placeholder="M/D/YYYY, H:mm:ss"
     />
   );
 };