fix: unselected date when changing time, reset time when selecting la…

…st selectable date (day)
kleros · May 28, 2024 · 4071937 · 4071937
1 parent d0e80d2
commit 4071937
Showing 1 changed file with 37 additions and 21 deletions.
diff --git a/src/lib/form/datepicker/index.tsx b/src/lib/form/datepicker/index.tsx
@@ -24,10 +24,26 @@ const DatePicker: React.FC<IDatePicker> = ({ onSelect, time }) => {
   const [date, setDate] = useState(new Date());
   const [hours, setHours] = useState(date.getHours());
   const [minutes, setMinutes] = useState(date.getMinutes());
+  const today = new Date();
+  const lastSelectableDate = new Date(today);
+  lastSelectableDate.setDate(today.getDate());
+
+  const updateDateWithTime = (selectedDate: Date) => {
+    if (selectedDate.toDateString() === lastSelectableDate.toDateString()) {
+      const now = new Date();
+      selectedDate.setHours(now.getHours(), now.getMinutes());
+      setHours(now.getHours());
+      setMinutes(now.getMinutes());
+    } else {
+      selectedDate.setHours(hours, minutes);
+    }
+    setDate(selectedDate);
+    onSelect(selectedDate);
+  };
+
   const {
     firstDayOfWeek,
     activeMonths,
-    isDateSelected,
     isDateHovered,
     isFirstOrLastSelectedDate,
     isDateBlocked,
@@ -42,30 +58,21 @@ const DatePicker: React.FC<IDatePicker> = ({ onSelect, time }) => {
     startDate: date,
     endDate: date,
     focusedInput: START_DATE,
-    onDatesChange: (date) => {
-      if (date.startDate) {
-        date.startDate.setHours(hours, minutes);
-        setDate(date.startDate);
-        onSelect(date.startDate);
+    onDatesChange: (data) => {
+      if (data.startDate) {
+        updateDateWithTime(new Date(data.startDate));
       }
     },
     numberOfMonths: 1,
     minBookingDays: 1,
     exactMinBookingDays: true,
   });
 
-  const onDateSelect = (date: Date) => {
-    handleDateSelect(date);
-    date.setHours(hours, minutes);
-    setDate(date);
-    onSelect(date);
-  };
-
-  const onTimeChange = (hours: number, minutes: number) => {
+  const onTimeChange = (newHours: number, newMinutes: number) => {
     const newDate = new Date(date);
-    newDate.setHours(hours, minutes);
-    setHours(hours);
-    setMinutes(minutes);
+    newDate.setHours(newHours, newMinutes);
+    setHours(newHours);
+    setMinutes(newMinutes);
     setDate(newDate);
     onSelect(newDate);
   };
@@ -75,11 +82,20 @@ const DatePicker: React.FC<IDatePicker> = ({ onSelect, time }) => {
       value={{
         focusedDate,
         isDateFocused,
-        isDateSelected,
+        isDateSelected: (selectedDate) => {
+          return (
+            selectedDate.getDate() === date.getDate() &&
+            selectedDate.getMonth() === date.getMonth() &&
+            selectedDate.getFullYear() === date.getFullYear()
+          );
+        },
         isDateHovered,
         isDateBlocked,
         isFirstOrLastSelectedDate,
-        onDateSelect,
+        onDateSelect: (selectedDate: Date) => {
+          handleDateSelect(selectedDate);
+          updateDateWithTime(selectedDate);
+        },
         onDateFocus,
         onDateHover,
       }}
@@ -97,8 +113,8 @@ const DatePicker: React.FC<IDatePicker> = ({ onSelect, time }) => {
             date,
             hours,
             minutes,
-            setHours: (hours) => onTimeChange(hours, minutes),
-            setMinutes: (minutes) => onTimeChange(hours, minutes),
+            setHours: (newHours) => onTimeChange(newHours, minutes),
+            setMinutes: (newMinutes) => onTimeChange(hours, newMinutes),
             onSelect: () => {
               date.setHours(hours, minutes);
               onSelect(date);