[DateTimeRangePicker] Use time in referenceDate when selecting date (…

…#15431)
mui · Nov 18, 2024 · f0fa96b · f0fa96b
1 parent e430b20
commit f0fa96b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -258,6 +258,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<
         rangePosition,
         allowRangeFlip,
         shouldMergeDateAndTime: true,
+        referenceDate,
       });
 
       const isNextSectionAvailable = availableRangePositions.includes(nextSelection);

diff --git a/...date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx b/...date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx
@@ -39,6 +39,25 @@ describe('<DesktopDateTimeRangePicker />', () => {
       expect(expectFieldValueV7(startSectionsContainer, '01/11/2018 04:05 PM'));
       expect(expectFieldValueV7(endSectionsContainer, '01/11/2018 05:10 PM'));
     });
+
+    it('should use time from `referenceDate` when selecting the day', () => {
+      render(
+        <DesktopDateTimeRangePicker
+          enableAccessibleFieldDOMStructure
+          referenceDate={adapterToUse.date('2022-04-14T14:15:00')}
+        />,
+      );
+
+      openPicker({ type: 'date-time-range', variant: 'desktop', initialFocus: 'start' });
+
+      fireEvent.click(screen.getByRole('gridcell', { name: '11' }));
+
+      expect(screen.getByRole('option', { name: '2 hours', selected: true })).not.to.equal(null);
+      expect(screen.getByRole('option', { name: '15 minutes', selected: true })).not.to.equal(null);
+      expect(screen.getByRole('option', { name: 'PM', selected: true })).not.to.equal(null);
+      const startSectionsContainer = getFieldSectionsContainer(0);
+      expect(expectFieldValueV7(startSectionsContainer, '04/11/2022 02:15 PM'));
+    });
   });
 
   describe('disabled dates', () => {

diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts
@@ -17,6 +17,15 @@ describe('date-range-manager', () => {
       expectedRange: [start2018, null],
       expectedNextSelection: 'end' as const,
     },
+    {
+      range: [null, null],
+      rangePosition: 'start' as const,
+      newDate: start2018,
+      expectedRange: [start2018At4PM, null],
+      expectedNextSelection: 'end' as const,
+      shouldMergeDateAndTime: true,
+      referenceDate: start2018At4PM,
+    },
     {
       range: [start2018, null],
       rangePosition: 'start' as const,
@@ -98,7 +107,16 @@ describe('date-range-manager', () => {
       expectedNextSelection: 'start' as const,
     },
   ].forEach(
-    ({ range, rangePosition, newDate, expectedRange, allowRangeFlip, expectedNextSelection }) => {
+    ({
+      range,
+      rangePosition,
+      newDate,
+      expectedRange,
+      allowRangeFlip,
+      expectedNextSelection,
+      shouldMergeDateAndTime,
+      referenceDate,
+    }) => {
       it(`calculateRangeChange should return ${expectedRange} when selecting ${rangePosition} of ${range} with user input ${newDate}`, () => {
         expect(
           calculateRangeChange({
@@ -107,6 +125,8 @@ describe('date-range-manager', () => {
             newDate,
             rangePosition,
             allowRangeFlip,
+            shouldMergeDateAndTime,
+            referenceDate,
           }),
         ).to.deep.equal({
           nextSelection: expectedNextSelection,

diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts
@@ -14,6 +14,7 @@ interface CalculateRangeChangeOptions<TDate extends PickerValidDate> {
    */
   allowRangeFlip?: boolean;
   shouldMergeDateAndTime?: boolean;
+  referenceDate?: TDate | null;
 }
 
 interface CalculateRangeChangeResponse<TDate extends PickerValidDate> {
@@ -28,6 +29,7 @@ export function calculateRangeChange<TDate extends PickerValidDate>({
   rangePosition,
   allowRangeFlip = false,
   shouldMergeDateAndTime = false,
+  referenceDate,
 }: CalculateRangeChangeOptions<TDate>): CalculateRangeChangeResponse<TDate> {
   const [start, end] = range;
 
@@ -41,21 +43,26 @@ export function calculateRangeChange<TDate extends PickerValidDate>({
     }
   }
 
+  const newSelectedDate =
+    referenceDate && selectedDate && shouldMergeDateAndTime
+      ? mergeDateAndTime(utils, selectedDate, referenceDate)
+      : selectedDate;
+
   if (rangePosition === 'start') {
     const truthyResult: CalculateRangeChangeResponse<TDate> = allowRangeFlip
-      ? { nextSelection: 'start', newRange: [end!, selectedDate] }
-      : { nextSelection: 'end', newRange: [selectedDate, null] };
-    return Boolean(end) && utils.isAfter(selectedDate!, end!)
+      ? { nextSelection: 'start', newRange: [end!, newSelectedDate] }
+      : { nextSelection: 'end', newRange: [newSelectedDate, null] };
+    return Boolean(end) && utils.isAfter(newSelectedDate!, end!)
       ? truthyResult
-      : { nextSelection: 'end', newRange: [selectedDate, end] };
+      : { nextSelection: 'end', newRange: [newSelectedDate, end] };
   }
 
   const truthyResult: CalculateRangeChangeResponse<TDate> = allowRangeFlip
-    ? { nextSelection: 'end', newRange: [selectedDate, start!] }
-    : { nextSelection: 'end', newRange: [selectedDate, null] };
-  return Boolean(start) && utils.isBeforeDay(selectedDate!, start!)
+    ? { nextSelection: 'end', newRange: [newSelectedDate, start!] }
+    : { nextSelection: 'end', newRange: [newSelectedDate, null] };
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate!, start!)
     ? truthyResult
-    : { nextSelection: 'start', newRange: [start, selectedDate] };
+    : { nextSelection: 'start', newRange: [start, newSelectedDate] };
 }
 
 export function calculateRangePreview<TDate extends PickerValidDate>(