fix: Date Range Picker behavior (#17914)

* fix: Date Range Picker behaviour

* remove console log

* update

* update

* update css

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/playwright/out-of-office.e2e.ts

@@ -207,7 +207,7 @@ test.describe("Out of office", () => {
 
     await page.getByTestId("add_entry_ooo").click();
 
-    await page.locator('[id="date"]').click();
+    await page.locator('[data-testid="date-range"]').click();
 
     await selectToAndFromDates(page, "13", "22", true);
 
@@ -247,7 +247,7 @@ test.describe("Out of office", () => {
 
     await page.getByTestId("add_entry_ooo").click();
 
-    await page.locator('[id="date"]').click();
+    await page.locator('[data-testid="date-range"]').click();
 
     await selectToAndFromDates(page, "13", "22");
 
@@ -258,7 +258,7 @@ test.describe("Out of office", () => {
     // add another entry
     await page.getByTestId("add_entry_ooo").click();
 
-    await page.locator('[id="date"]').click();
+    await page.locator('[data-testid="date-range"]').click();
 
     await selectToAndFromDates(page, "11", "24");
 
@@ -277,7 +277,7 @@ test.describe("Out of office", () => {
 
     await page.getByTestId("add_entry_ooo").click();
 
-    await page.locator('[id="date"]').click();
+    await page.locator('[data-testid="date-range"]').click();
 
     await selectToAndFromDates(page, "13", "22");
 
@@ -288,7 +288,7 @@ test.describe("Out of office", () => {
     // add another entry
     await page.getByTestId("add_entry_ooo").click();
 
-    await page.locator('[id="date"]').click();
+    await page.locator('[data-testid="date-range"]').click();
 
     await selectToAndFromDates(page, "13", "22");
 
@@ -305,9 +305,6 @@ async function saveAndWaitForResponse(page: Page, expectedStatusCode = 200) {
 }
 
 async function selectToAndFromDates(page: Page, fromDate: string, toDate: string, isRangeInPast = false) {
-  // deselects by default selected range start day
-  await page.locator(`button[name="day"].rdp-day_range_start`).click();
-
   const month = isRangeInPast ? "previous" : "next";
 
   await page.locator(`button[name="${month}-month"]`).click();

packages/features/insights/filters/DateSelect.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { DateRangePicker } from "@calcom/ui";
@@ -22,10 +23,10 @@ export const DateSelect = () => {
   const { filter, setConfigFilters } = useFilterContext();
   const currentDate = dayjs();
   const [initialStartDate, initialEndDate, range] = filter?.dateRange || [null, null, null];
-  const [startDate, setStartDate] = useState(initialStartDate);
-  const [endDate, setEndDate] = useState(initialEndDate);
-  const startValue = startDate?.toDate() || null;
-  const endValue = endDate?.toDate() || null;
+  const [startDate, setStartDate] = useState<Dayjs>(initialStartDate);
+  const [endDate, setEndDate] = useState<Dayjs | undefined>(initialEndDate);
+  const startValue = startDate.toDate();
+  const endValue = endDate?.toDate();
   const [selectedPreset, setSelectedPreset] = useState(presetOptions.find((c) => c.value === range));
 
   const updateDateRange = (val: string | null) => {
@@ -77,11 +78,13 @@ export const DateSelect = () => {
         maxDate={currentDate.toDate()}
         disabled={false}
         onDatesChange={({ startDate, endDate }) => {
-          setConfigFilters({
-            dateRange: [dayjs(startDate), dayjs(endDate), null],
-          });
+          if (startDate && endDate) {
+            setConfigFilters({
+              dateRange: [dayjs(startDate), dayjs(endDate), null],
+            });
+          }
           setStartDate(dayjs(startDate));
-          setEndDate(dayjs(endDate));
+          setEndDate(endDate ? dayjs(endDate) : endDate);
           setSelectedPreset(presetOptions.find((c) => c.value === null));
         }}
       />

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

@@ -42,7 +42,8 @@ function Calendar({
           buttonClasses({ color: "minimal" }),
           "w-8 h-8 md:h-11 md:w-11 p-0 text-sm font-medium aria-selected:opacity-100 inline-flex items-center justify-center"
         ),
-        day_range_end: "day-range-end",
+        day_range_end: "hover:!bg-inverted hover:!text-inverted",
+        day_range_start: "hover:!bg-inverted hover:!text-inverted",
         day_selected: "bg-inverted text-inverted",
         day_today: "",
         day_outside: "",

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

@@ -3,7 +3,6 @@
 import * as Popover from "@radix-ui/react-popover";
 import { format } from "date-fns";
 import * as React from "react";
-import type { DateRange } from "react-day-picker";
 
 import { classNames as cn } from "@calcom/lib";
 
@@ -26,12 +25,13 @@ export function DatePickerWithRange({
   onDatesChange,
   disabled,
 }: React.HTMLAttributes<HTMLDivElement> & DatePickerWithRangeProps) {
-  // Even though this is uncontrolled we need to do a bit of logic to improve the UX when selecting dates
-  function _onDatesChange(onChangeValues: DateRange | undefined) {
-    if (onChangeValues?.from && !onChangeValues?.to) {
-      onDatesChange({ startDate: onChangeValues.from, endDate: onChangeValues.from });
+  function handleDayClick(date: Date) {
+    if (dates?.endDate) {
+      onDatesChange({ startDate: date, endDate: undefined });
     } else {
-      onDatesChange({ startDate: onChangeValues?.from, endDate: onChangeValues?.to });
+      const startDate = date < dates.startDate ? date : dates.startDate;
+      const endDate = date < dates.startDate ? dates.startDate : date;
+      onDatesChange({ startDate, endDate });
     }
   }
   const fromDate = minDate ?? new Date();
@@ -41,7 +41,7 @@ export function DatePickerWithRange({
       <Popover.Root>
         <Popover.Trigger asChild>
           <Button
-            id="date"
+            data-testid="date-range"
             color="secondary"
             EndIcon="calendar"
             className={cn("justify-between text-left font-normal", !dates && "text-subtle")}>
@@ -51,7 +51,7 @@ export function DatePickerWithRange({
                   {format(dates.startDate, "LLL dd, y")} - {format(dates.endDate, "LLL dd, y")}
                 </>
               ) : (
-                format(dates.startDate, "LLL dd, y")
+                <>{format(dates.startDate, "LLL dd, y")} - End</>
               )
             ) : (
               <span>Pick a date</span>
@@ -70,7 +70,7 @@ export function DatePickerWithRange({
             mode="range"
             defaultMonth={dates?.startDate}
             selected={{ from: dates?.startDate, to: dates?.endDate }}
-            onSelect={(values) => _onDatesChange(values)}
+            onDayClick={(day) => handleDayClick(day)}
             numberOfMonths={1}
             disabled={disabled}
           />