[DateRangePicker] Fix timezone update issue leading to invalidRange error (#20863)

packages/x-date-pickers-pro/src/DateRangeCalendar/timezone.DateRangeCalendar.test.tsx

@@ -35,6 +35,49 @@ describe('<DateRangeCalendar /> - Timezone', () => {
           }).length,
         ).to.equal(30);
       });
+
+      it('should not produce invalidRange error when selecting same day after timezone change', () => {
+        function DateRangeCalendarWithTimezoneChange() {
+          const [timezone, setTimezone] = React.useState<string>('UTC');
+          const [value, setValue] = React.useState<any>([null, null]);
+
+          return (
+            <React.Fragment>
+              <DateRangeCalendar
+                timezone={timezone}
+                calendars={1}
+                value={value}
+                onChange={(newValue) => setValue(newValue)}
+                defaultValue={[
+                  adapter.date('2025-11-11', 'UTC'),
+                  adapter.date('2025-11-11', 'UTC'),
+                ]}
+              />
+              <button onClick={() => setTimezone('America/Los_Angeles')}>
+                Switch to Los Angeles
+              </button>
+              <div data-testid="value-display">
+                {value[0] ? adapter.format(value[0], 'keyboardDate') : 'null'} -{' '}
+                {value[1] ? adapter.format(value[1], 'keyboardDate') : 'null'}
+              </div>
+            </React.Fragment>
+          );
+        }
+
+        render(<DateRangeCalendarWithTimezoneChange />);
+
+        // Switch timezone to Los Angeles
+        fireEvent.click(screen.getByRole('button', { name: 'Switch to Los Angeles' }));
+
+        // Select Nov 12, 2025 as both start and end date
+        const nov12Cells = screen.getAllByRole('gridcell', { name: '12' });
+        fireEvent.click(nov12Cells[0]);
+        fireEvent.click(nov12Cells[0]);
+
+        // Step 4: Verify that the range is valid (both dates should be Nov 12)
+        // The value should not have an invalidRange error, which would prevent onChange from being called
+        expect(screen.getByTestId('value-display')).not.to.have.text('null - null');
+      });
     });
   });
 });

packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts

@@ -4,7 +4,8 @@ import { calculateRangeChange, calculateRangePreview } from './date-range-manage
 import { DateRange } from '../../models';
 
 const start2018 = adapterToUse.date('2018-01-01');
-const start2018At4PM = adapterToUse.date('2018-01-01T16:00:00');
+const start2018EndOfDay = adapterToUse.date('2018-01-01T23:59:59.999Z');
+const start2018At4PM = adapterToUse.date('2018-01-01T16:00:00.000Z');
 const mid2018 = adapterToUse.date('2018-07-01');
 const end2019 = adapterToUse.date('2019-01-01');
 
@@ -102,7 +103,7 @@ describe('date-range-manager', () => {
       range: [start2018At4PM, null],
       rangePosition: 'end' as const,
       newDate: start2018,
-      expectedRange: [start2018At4PM, start2018],
+      expectedRange: [start2018At4PM, start2018EndOfDay],
       allowRangeFlip: false,
       expectedNextSelection: 'start' as const,
     },

packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts

@@ -71,9 +71,24 @@ export function calculateRangeChange({
   const truthyResult: CalculateRangeChangeResponse = allowRangeFlip
     ? { nextSelection: 'end', newRange: [newSelectedDate, start!] }
     : { nextSelection: 'end', newRange: [newSelectedDate, null] };
-  return Boolean(start) && adapter.isBeforeDay(newSelectedDate!, start!)
-    ? truthyResult
-    : { nextSelection: 'start', newRange: [start, newSelectedDate] };
+
+  if (Boolean(start) && adapter.isBeforeDay(newSelectedDate!, start!)) {
+    return truthyResult;
+  }
+
+  // If we're selecting the same day as the start, but the time would make the range invalid,
+  // set the end to the end of the day instead
+  let adjustedEndDate = newSelectedDate;
+  if (
+    start &&
+    newSelectedDate &&
+    adapter.isSameDay(start, newSelectedDate) &&
+    adapter.isBefore(newSelectedDate, start)
+  ) {
+    adjustedEndDate = adapter.endOfDay(newSelectedDate);
+  }
+
+  return { nextSelection: 'start', newRange: [start, adjustedEndDate] };
 }
 
 export function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue {