chore: update date time format

web/src/components/DateTimeInput.tsx

@@ -1,34 +1,34 @@
 import dayjs from "dayjs";
-import { isEqual } from "lodash-es";
 import toast from "react-hot-toast";
 import { cn } from "@/utils";
 
+const DATE_TIME_FORMAT = "M/D/YYYY, H:mm:ss";
+
 // convert Date to datetime string.
-const formatDate = (date: Date | undefined): string => {
-  return dayjs(date).format("M/D/YYYY, H:mm:ss");
+const formatDate = (date: Date): string => {
+  return dayjs(date).format(DATE_TIME_FORMAT);
 };
 
 interface Props {
-  value: Date | undefined;
-  originalValue: Date | undefined;
+  value: Date;
   onChange: (date: Date) => void;
 }
 
-const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => {
+const DateTimeInput: React.FC<Props> = ({ value, onChange }) => {
   return (
     <input
       type="text"
       className={cn(
         "px-1 bg-transparent rounded text-xs transition-all",
         "border-transparent outline-none focus:border-gray-300 dark:focus:border-zinc-700",
-        !isEqual(value, originalValue) && "border-gray-300 dark:border-zinc-700",
         "border",
       )}
       defaultValue={formatDate(value)}
       onBlur={(e) => {
         const inputValue = e.target.value;
         if (inputValue) {
-          const date = new Date(inputValue);
+          const date = dayjs(inputValue, DATE_TIME_FORMAT, true).toDate();
+          // Check if the date is valid.
           if (!isNaN(date.getTime())) {
             onChange(date);
           } else {
@@ -37,7 +37,7 @@ const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => {
           }
         }
       }}
-      placeholder="M/D/YYYY, H:mm:ss"
+      placeholder={DATE_TIME_FORMAT}
     />
   );
 };

web/src/components/MemoEditor/index.tsx

@@ -74,8 +74,6 @@ const MemoEditor = observer((props: Props) => {
   });
   const [createTime, setCreateTime] = useState<Date | undefined>();
   const [updateTime, setUpdateTime] = useState<Date | undefined>();
-  const [originalCreateTime, setOriginalCreateTime] = useState<Date | undefined>();
-  const [originalUpdateTime, setOriginalUpdateTime] = useState<Date | undefined>();
   const [hasContent, setHasContent] = useState<boolean>(false);
   const [isVisibilitySelectorOpen, setIsVisibilitySelectorOpen] = useState(false);
   const editorRef = useRef<EditorRefActions>(null);
@@ -125,8 +123,6 @@ const MemoEditor = observer((props: Props) => {
       handleEditorFocus();
       setCreateTime(memo.createTime);
       setUpdateTime(memo.updateTime);
-      setOriginalCreateTime(memo.createTime);
-      setOriginalUpdateTime(memo.updateTime);
       setState((prevState) => ({
         ...prevState,
         memoVisibility: memo.visibility,
@@ -550,14 +546,18 @@ const MemoEditor = observer((props: Props) => {
       {memoName && (
         <div className="w-full -mt-1 mb-4 text-xs leading-5 px-4 opacity-60 font-mono text-gray-500 dark:text-zinc-500">
           <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 items-center">
-            {!isEqual(createTime, updateTime) && (
+            {!isEqual(createTime, updateTime) && updateTime && (
               <>
                 <span className="text-left">Updated</span>
-                <DateTimeInput value={updateTime} originalValue={originalUpdateTime} onChange={setUpdateTime} />
+                <DateTimeInput value={updateTime} onChange={setUpdateTime} />
               </>
             )}
+            {createTime && (
+              <>
                 <span className="text-left">Created</span>
-            <DateTimeInput value={createTime} originalValue={originalCreateTime} onChange={setCreateTime} />
+                <DateTimeInput value={createTime} onChange={setCreateTime} />
+              </>
+            )}
             <span className="text-left">ID</span>
             <span
               className="px-1 border border-transparent cursor-default"