fix: improve date selection behavior in DateRangePicker (calcom#21438)

* fix: implement Airbnb-style date selection in DateRangePicker

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: add behavior for clicking on start/end date in DateRangePicker

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: eunjae@cal.com <hey@eunjae.dev>

Author: devin-ai-integration[bot]

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

@@ -44,28 +44,22 @@ export function DatePickerWithRange({
         onDatesChange({ startDate, endDate });
       }
     } else {
-      // 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) {
+      // for Limit Future Booking and other date range selections (no past dates)
+      if (!dates.startDate) {
+        onDatesChange({ startDate: date, endDate: undefined });
+      } else if (!dates.endDate) {
+        if (date < dates.startDate) {
+          onDatesChange({ startDate: date, endDate: dates.startDate });
+        } else {
           onDatesChange({ startDate: dates.startDate, endDate: date });
+        }
+      } else {
+        if (date.getTime() === dates.startDate.getTime() || date.getTime() === dates.endDate.getTime()) {
+          onDatesChange({ startDate: date, endDate: undefined });
+        } else if (date < dates.startDate) {
+          onDatesChange({ startDate: date, endDate: undefined });
         } 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 });
-          }
+          onDatesChange({ startDate: dates.startDate, endDate: date });
         }
       }
     }