fix: Updated DateRangePicker in limit future booking (#20483)

* fix: Updated DateRangePicker in limit future booking

* removed unnecessary comments

* minor changes in end date selection

* final changes in end date selection

* minor changes in end date selection

* fixed issue of logs

* added allowPastDates props for out of office data selection

packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx

@@ -301,6 +301,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
                         onChange(values);
                       }}
                       strictlyBottom={true}
+                      allowPastDates={true}
                     />
                   )}
                 />

packages/ui/components/form/date-range-picker/DateRangePicker.tsx

@@ -18,6 +18,7 @@ type DatePickerWithRangeProps = {
   withoutPopover?: boolean;
   "data-testid"?: string;
   strictlyBottom?: boolean;
+  allowPastDates?: boolean;
 };
 
 export function DatePickerWithRange({
@@ -30,23 +31,52 @@ export function DatePickerWithRange({
   withoutPopover,
   "data-testid": testId,
   strictlyBottom,
+  allowPastDates = false,
 }: React.HTMLAttributes<HTMLDivElement> & DatePickerWithRangeProps) {
   function handleDayClick(date: Date) {
-    if (dates?.endDate) {
-      onDatesChange({ startDate: date, endDate: undefined });
+    if (allowPastDates) {
+      // for Out of Office (past dates allowed)
+      if (dates?.endDate) {
+        onDatesChange({ startDate: date, endDate: undefined });
+      } else {
+        const startDate = dates.startDate ? (date < dates.startDate ? date : dates.startDate) : date;
+        const endDate = dates.startDate ? (date < dates.startDate ? dates.startDate : date) : undefined;
+        onDatesChange({ startDate, endDate });
+      }
     } else {
-      const startDate = dates.startDate ? (date < dates.startDate ? date : dates.startDate) : date;
-      const endDate = dates.startDate ? (date < dates.startDate ? dates.startDate : date) : undefined;
-      onDatesChange({ startDate, endDate });
+      // for Limit Future Booking (no past dates)
+      if (!dates.startDate || !dates.endDate) {
+        onDatesChange({ startDate: date, endDate: date });
+      } else {
+        const startTime = dates.startDate.getTime();
+        const endTime = dates.endDate.getTime();
+        const clickedTime = date.getTime();
+
+        if (clickedTime === startTime || clickedTime === endTime) {
+          onDatesChange({ startDate: date, endDate: date });
+        } else if (clickedTime < startTime) {
+          onDatesChange({ startDate: date, endDate: dates.endDate });
+        } else if (clickedTime > endTime) {
+          onDatesChange({ startDate: dates.startDate, endDate: date });
+        } else {
+          const startDiff = clickedTime - startTime;
+          const endDiff = endTime - clickedTime;
+          if (startDiff < endDiff) {
+            onDatesChange({ startDate: date, endDate: dates.endDate });
+          } else {
+            onDatesChange({ startDate: dates.startDate, endDate: date });
+          }
+        }
+      }
     }
   }
-  const fromDate = minDate ?? new Date();
+
+  const fromDate = allowPastDates && minDate === null ? undefined : minDate ?? new Date();
 
   const calendar = (
     <Calendar
       initialFocus
-      //When explicitly null, we want past dates to be shown as well, otherwise show only dates passed or from current date
-      fromDate={minDate === null ? undefined : fromDate}
+      fromDate={fromDate}
       toDate={maxDate}
       mode="range"
       defaultMonth={dates?.startDate}