Fix when editing event time doesn't match

app/components/DateInput.tsx

@@ -1,5 +1,6 @@
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { dateToYearMonthDayHourMinuteString } from "~/utils/dates";
+import * as React from "react";
 
 export function DateInput({
   id,
@@ -18,6 +19,7 @@ export function DateInput({
   "data-cy": string;
   required?: boolean;
 }) {
+  const [date, setDate] = React.useState(defaultValue ?? new Date());
   const isMounted = useIsMounted();
 
   if (!isMounted) {
@@ -33,19 +35,18 @@ export function DateInput({
   }
 
   return (
-    <input
-      id={id}
-      type="datetime-local"
-      name={name}
-      defaultValue={
-        defaultValue
-          ? dateToYearMonthDayHourMinuteString(defaultValue)
-          : undefined
-      }
-      min={min ? dateToYearMonthDayHourMinuteString(min) : undefined}
-      max={max ? dateToYearMonthDayHourMinuteString(max) : undefined}
-      data-cy={dataCy}
-      required={required}
-    />
+    <>
+      {date && <input name={name} type="hidden" value={date.getTime()} />}
+      <input
+        id={id}
+        type="datetime-local"
+        value={dateToYearMonthDayHourMinuteString(date)}
+        min={min ? dateToYearMonthDayHourMinuteString(min) : undefined}
+        max={max ? dateToYearMonthDayHourMinuteString(max) : undefined}
+        onChange={(e) => setDate(new Date(e.target.value))}
+        data-cy={dataCy}
+        required={required}
+      />
+    </>
   );
 }

app/utils/zod.ts

@@ -40,7 +40,9 @@ export function actualNumber(value: unknown) {
 
 export function date(value: unknown) {
   if (typeof value === "string" || typeof value === "number") {
-    return new Date(value);
+    const valueAsNumber = Number(value);
+
+    return new Date(Number.isNaN(valueAsNumber) ? value : valueAsNumber);
   }
 
   return value;