fix: convert Mantine v9 DateInput string values to Date for date-fns (HDX-3981)

Mantine v9 DateInput onChange now returns strings instead of Date objects.
This broke the TimePicker which passes form values to date-fns functions
(format, add, sub) and calls .getTime() on them.

- Add toDate() helper to convert string values back to Date objects
- Override DateInputCmp onChange to convert before storing in form
- Guard handleApply, handleMove, and mode-switch with toDate()
- Guard useTimePickerForm onValuesChange date comparison

Author: brandon-pereira

packages/app/src/components/TimePicker/TimePicker.tsx

@@ -46,7 +46,11 @@ const modeAtom = atomWithStorage<TimePickerMode>(
 const DATE_INPUT_PLACEHOLDER = 'YYY-MM-DD HH:mm:ss';
 const DATE_INPUT_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 
-const DateInputCmp = (props: DateInputProps) => (
+/** Ensure a value is a Date object (Mantine v9 DateInput returns strings). */
+const toDate = (v: Date | string | null): Date | null =>
+  v == null ? null : v instanceof Date ? v : new Date(v);
+
+const DateInputCmp = ({ onChange: onChangeProp, ...props }: DateInputProps) => (
   <DateInput
     size="xs"
     highlightToday
@@ -60,6 +64,7 @@ const DateInputCmp = (props: DateInputProps) => (
       }
     }}
     {...props}
+    onChange={v => onChangeProp?.(toDate(v) as any)}
   />
 );
 
@@ -176,7 +181,8 @@ const TimePickerComponent = ({
     if (!form.isValid() || !opened) {
       return;
     }
-    const { startDate, endDate } = form.values;
+    const startDate = toDate(form.values.startDate);
+    const endDate = toDate(form.values.endDate);
     if (mode === TimePickerMode.Range) {
       handleSearch([startDate, endDate]);
       close();
@@ -194,7 +200,8 @@ const TimePickerComponent = ({
 
   const handleMove = React.useCallback(
     (d: Duration) => {
-      const { startDate, endDate } = form.values;
+      const startDate = toDate(form.values.startDate);
+      const endDate = toDate(form.values.endDate);
       const from = startDate && add(startDate, d);
       const to = endDate && add(endDate, d);
       handleSearch([from, to]);
@@ -368,15 +375,12 @@ const TimePickerComponent = ({
                     form.values.startDate &&
                     form.values.endDate
                   ) {
+                    const start = toDate(form.values.startDate)!;
+                    const end = toDate(form.values.endDate)!;
                     const midpoint = new Date(
-                      (form.values.startDate.getTime() +
-                        form.values.endDate.getTime()) /
-                        2,
+                      (start.getTime() + end.getTime()) / 2,
                     );
-                    const halfRangeMs =
-                      (form.values.endDate.getTime() -
-                        form.values.startDate.getTime()) /
-                      2;
+                    const halfRangeMs = (end.getTime() - start.getTime()) / 2;
 
                     // Find the closest duration option
                     const halfRangeMinutes = halfRangeMs / (1000 * 60);

packages/app/src/components/TimePicker/useTimePickerForm.ts

@@ -36,11 +36,20 @@ export const useTimePickerForm = ({ mode }: { mode: TimePickerMode }) => {
 
     onValuesChange: values => {
       // Ensure that end date is not before start date
-      if (
-        values.endDate &&
-        values.startDate &&
-        values.endDate < values.startDate
-      ) {
+      // Guard with getTime() since Mantine v9 DateInput may supply strings
+      const start =
+        values.startDate instanceof Date
+          ? values.startDate
+          : values.startDate
+            ? new Date(values.startDate)
+            : null;
+      const end =
+        values.endDate instanceof Date
+          ? values.endDate
+          : values.endDate
+            ? new Date(values.endDate)
+            : null;
+      if (start && end && end.getTime() < start.getTime()) {
         form.setFieldValue('endDate', values.startDate);
       }
     },