Add start and end date state variables and format input value based o…

…n selected dates
OpenRailAssociation · May 31, 2024 · 548ed75 · 548ed75
1 parent edd39a0
commit 548ed75
Showing 1 changed file with 74 additions and 5 deletions.
diff --git a/ui-core/src/components/inputs/datePicker/DatePicker.tsx b/ui-core/src/components/inputs/datePicker/DatePicker.tsx
@@ -15,6 +15,8 @@ export type DatePickerProps = {
 export const DatePicker: React.FC<DatePickerProps> = ({ inputProps, calendarPickerProps }) => {
   const [showPicker, toggleShowPicker] = useState(false);
   const [inputValue, setInputValue] = useState('');
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
   const { overrideClassname, onChange, ...restInputProps } = inputProps;
   const calendarPickerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -26,15 +28,82 @@ export const DatePicker: React.FC<DatePickerProps> = ({ inputProps, calendarPick
     -24
   );
 
+  const formatDateString = (date: Date) => {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = String(date.getFullYear()).slice(-2);
+    return `${day}/${month}/${year}`;
+  };
+
+  const updateInputValue = (start: Date, end: Date | null) => {
+    if (start && end && calendarPickerProps.mode === 'range') {
+      const startYear = start.getFullYear();
+      const endYear = end.getFullYear();
+      let formattedDate = '';
+
+      if (startYear === endYear) {
+        formattedDate = `${formatDateString(start).slice(0, 5)} - ${formatDateString(end)}`;
+      } else {
+        formattedDate = `${formatDateString(start)} - ${formatDateString(end)}`;
+      }
+      setInputValue(formattedDate);
+      onChange?.({ target: { value: formattedDate } } as React.ChangeEvent<HTMLInputElement>);
+    } else if (start && calendarPickerProps.mode === 'single') {
+      const formattedDate = formatDateString(start);
+      setInputValue(formattedDate);
+      onChange?.({ target: { value: formattedDate } } as React.ChangeEvent<HTMLInputElement>);
+    }
+  };
+
   const handleDateChange = (date: Date | string) => {
-    let formattedDate = '';
+    let newStartDate = startDate;
+    let newEndDate = endDate;
+
     if (date instanceof Date) {
-      formattedDate = date.toLocaleDateString();
+      if (calendarPickerProps.mode === 'single') {
+        newStartDate = date;
+        newEndDate = null;
+      } else {
+        if (!startDate) {
+          newStartDate = date;
+          newEndDate = null;
+        } else if (!endDate) {
+          newEndDate = date;
+        } else {
+          newStartDate = date;
+          newEndDate = null;
+        }
+      }
     } else {
-      formattedDate = date;
+      const parsedDate = new Date(date);
+      if (!isNaN(parsedDate.getTime())) {
+        if (calendarPickerProps.mode === 'single') {
+          newStartDate = parsedDate;
+          newEndDate = null;
+        } else {
+          if (!startDate) {
+            newStartDate = parsedDate;
+            newEndDate = null;
+          } else if (!endDate) {
+            newEndDate = parsedDate;
+          } else {
+            newStartDate = parsedDate;
+            newEndDate = null;
+          }
+        }
+      }
     }
-    setInputValue(formattedDate);
-    onChange?.({ target: { value: formattedDate } } as React.ChangeEvent<HTMLInputElement>);
+
+    if (newStartDate && newEndDate && newStartDate > newEndDate) {
+      // Swap the dates if startDate is after endDate
+      const tempDate = newStartDate;
+      newStartDate = newEndDate;
+      newEndDate = tempDate;
+    }
+
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+    updateInputValue(newStartDate!, newEndDate);
   };
 
   useEffect(() => {