[pickers] fix the issue of the timezone change in Day calendar

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

@@ -24,6 +24,8 @@ import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 import { describeConformance } from 'test/utils/describeConformance';
 import { DateRangePosition } from './DateRangeCalendar.types';
 
+const TIMEZONE_TO_TEST = ['UTC', 'system', 'America/New_York'];
+
 const getPickerDay = (name: string, picker = 'January 2018') =>
   getByRole(screen.getByText(picker)?.parentElement?.parentElement!, 'gridcell', { name });
 
@@ -564,4 +566,89 @@ describe('<DateRangeCalendar />', () => {
       expect(RenderCount.callCount - renderCountBeforeChange).to.equal(6); // 2 render * 3 day
     });
   });
+
+  TIMEZONE_TO_TEST.forEach((timezone) => {
+    describe(`timezone change from utc to ${timezone}`, () => {
+      it('on timezone change the rendered UI should display the Calendar of same month', () => {
+        // Render the component with initial timezone prop
+        const { rerender } = render(<DateRangeCalendar timezone="UTC" />);
+
+        // Create a map of buttons with their indices for the initial render
+        const renderButtonsMap = {};
+        screen.getAllByRole('gridcell').forEach((element, index) => {
+          if (element.tagName.toLowerCase() === 'button' && element && element.textContent) {
+            const numberMatch = element.textContent.trim().match(/\d+/);
+            if (numberMatch) {
+              const number = parseInt(numberMatch[0], 10);
+              renderButtonsMap[index] = number;
+            }
+          }
+        });
+
+        // Rerender the component with a different timezone prop
+        rerender(<DateRangeCalendar timezone={timezone} />);
+
+        // Create a map of buttons with their indices for the rerender
+        const reRenderButtonsMap = {};
+
+        screen.getAllByRole('gridcell').forEach((element, index) => {
+          if (element.tagName.toLowerCase() === 'button' && element && element.textContent) {
+            const numberMatch = element.textContent.trim().match(/\d+/);
+            if (numberMatch) {
+              const number = parseInt(numberMatch[0], 10);
+              reRenderButtonsMap[index] = number;
+            }
+          }
+        });
+
+        // Ensure the number of buttons and their numbers are consistent
+        expect(Object.keys(reRenderButtonsMap).length).equals(Object.keys(renderButtonsMap).length);
+        Object.keys(renderButtonsMap).forEach((index) => {
+          expect(reRenderButtonsMap[index]).equals(renderButtonsMap[index]);
+        });
+      });
+
+      it('should select the range from the next month', () => {
+        const { rerender } = render(
+          <DateRangeCalendar
+            timezone="UTC"
+            defaultValue={[adapterToUse.date('2019-01-01'), null]}
+          />,
+        );
+
+        fireEvent.click(getPickerDay('10', 'January 2019'));
+        fireEvent.click(getPickerDay('19', 'February 2019'));
+
+        const renderButtons = screen
+          .getAllByRole('gridcell')
+          .filter((button) => button.tagName.toLowerCase() === 'button');
+
+        const selectedStartDateButton = renderButtons.findIndex(
+          (button) => button.dataset.position === 'start',
+        );
+
+        const selectedEndDateButton = renderButtons.findIndex(
+          (button) => button.dataset.position === 'end',
+        );
+
+        rerender(
+          <DateRangeCalendar
+            timezone={timezone}
+            defaultValue={[adapterToUse.date('2019-01-01'), null]}
+          />,
+        );
+
+        const rerenderedStartDateButton = renderButtons.findIndex(
+          (button) => button.dataset.position === 'start',
+        );
+
+        const rerenderedEndDateButton = renderButtons.findIndex(
+          (button) => button.dataset.position === 'end',
+        );
+
+        expect(Math.abs(selectedStartDateButton - rerenderedStartDateButton)).lessThanOrEqual(1);
+        expect(Math.abs(selectedEndDateButton - rerenderedEndDateButton)).lessThanOrEqual(1);
+      });
+    });
+  });
 });

packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx

@@ -128,4 +128,29 @@ describe('<AdapterDateFns />', () => {
       });
     });
   });
+
+  describe('Test setMonthYearDate', () => {
+    const { render, clock, adapter } = createPickerRenderer({
+      clock: 'fake',
+      adapterName: 'date-fns',
+      locale: enUS,
+    });
+
+    const { renderWithProps } = buildFieldInteractions({
+      render,
+      clock,
+      Component: DateTimeField,
+    });
+
+    it('should set month, year, and date correctly', () => {
+      const initialDate = adapter.date('2022-01-15T09:35:00')!;
+      const newDate = adapter.setMonthYearDate(initialDate, 1400, 0, 25);
+
+      const v7Response = renderWithProps({
+        enableAccessibleFieldDOMStructure: true,
+        value: newDate,
+      });
+      expectFieldValueV7(v7Response.getSectionsContainer(), '01/25/1400 09:35 AM');
+    });
+  });
 });

packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts

@@ -327,4 +327,8 @@ export class AdapterDateFns
 
     return years;
   };
+
+  public setMonthYearDate = (value: Date, year: number, month: number, date: number) => {
+    return setDate(setMonth(setYear(value, year), month), date);
+  };
 }

packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx

@@ -92,4 +92,29 @@ describe('<AdapterDateFnsJalali />', () => {
       });
     });
   });
+
+  describe('Test setMonthYearDate', () => {
+    const { render, clock, adapter } = createPickerRenderer({
+      clock: 'fake',
+      adapterName: 'date-fns-jalali',
+      locale: enUS,
+    });
+
+    const { renderWithProps } = buildFieldInteractions({
+      render,
+      clock,
+      Component: DateTimeField,
+    });
+
+    it('should set month, year, and date correctly', () => {
+      const initialDate = adapter.date('2022-01-15T09:35:00')!;
+      const newDate = adapter.setMonthYearDate(initialDate, 1400, 0, 25);
+
+      const v7Response = renderWithProps({
+        enableAccessibleFieldDOMStructure: true,
+        value: newDate,
+      });
+      expectFieldValueV7(v7Response.getSectionsContainer(), '01/25/1400 09:35 AM');
+    });
+  });
 });

packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts

@@ -519,4 +519,8 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter<Date, DateFnsLoca
 
     return years;
   };
+
+  public setMonthYearDate = (value: Date, year: number, month: number, date: number) => {
+    return setDate(setMonth(setYear(value, year), month), date);
+  };
 }

packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts

@@ -334,4 +334,8 @@ export class AdapterDateFns
 
     return years;
   };
+
+  public setMonthYearDate = (value: Date, year: number, month: number, date: number) => {
+    return setDate(setMonth(setYear(value, year), month), date);
+  };
 }

packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx

@@ -155,5 +155,31 @@ describe('<AdapterDayjs />', () => {
         });
       });
     });
+
+    describe('Test setMonthYearDate', () => {
+      const localeObject = { code: 'en' };
+      const { render, clock, adapter } = createPickerRenderer({
+        clock: 'fake',
+        adapterName: 'dayjs',
+        locale: localeObject,
+      });
+
+      const { renderWithProps } = buildFieldInteractions({
+        render,
+        clock,
+        Component: DateTimeField,
+      });
+
+      it('should set month, year, and date correctly', () => {
+        const initialDate = adapter.date('2022-01-15T09:35:00')!;
+        const newDate = adapter.setMonthYearDate(initialDate, 1400, 4, 25);
+
+        const v7Response = renderWithProps({
+          enableAccessibleFieldDOMStructure: true,
+          value: newDate,
+        });
+        expectFieldValueV7(v7Response.getSectionsContainer(), '05/25/1400 09:35 AM');
+      });
+    });
   });
 });

packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts

@@ -677,4 +677,8 @@ export class AdapterDayjs implements MuiPickersAdapter<Dayjs, string> {
 
     return years;
   };
+
+  public setMonthYearDate = (value: Dayjs, year: number, month: number, date: number) => {
+    return this.adjustOffset(value.set('year', year).set('month', month).set('date', date));
+  };
 }

packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx

@@ -188,5 +188,31 @@ describe('<AdapterLuxon />', () => {
         });
       });
     });
+
+    describe('Test setMonthYearDate', () => {
+      const localeObject = { code: 'en' };
+      const { render, clock, adapter } = createPickerRenderer({
+        clock: 'fake',
+        adapterName: 'luxon',
+        locale: localeObject,
+      });
+
+      const { renderWithProps } = buildFieldInteractions({
+        render,
+        clock,
+        Component: DateTimeField,
+      });
+
+      it('should set month, year, and date correctly', () => {
+        const initialDate = adapter.date('2022-01-15T09:35:00')!;
+        const newDate = adapter.setMonthYearDate(initialDate, 1400, 0, 25);
+
+        const v7Response = renderWithProps({
+          enableAccessibleFieldDOMStructure: true,
+          value: newDate,
+        });
+        expectFieldValueV7(v7Response.getSectionsContainer(), '01/25/1400 09:35 AM');
+      });
+    });
   });
 });

packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts

@@ -499,4 +499,10 @@ export class AdapterLuxon implements MuiPickersAdapter<DateTime, string> {
 
     return years;
   };
+
+  public setMonthYearDate = (value: DateTime, year: number, month: number, date: number) => {
+    // See https://github.com/moment/luxon/blob/master/docs/moment.md#major-functional-differences
+    // also refer getMonth() method it returns  -1 month
+    return value.set({ year, month: month + 1, day: date });
+  };
 }

packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx

@@ -188,4 +188,30 @@ describe('<AdapterMoment />', () => {
     adapter.date()!;
     expect(spiedInstance.callCount).to.equal(1);
   });
+
+  describe('Test setMonthYearDate', () => {
+    const localeObject = { code: 'en' };
+    const { render, clock, adapter } = createPickerRenderer({
+      clock: 'fake',
+      adapterName: 'moment',
+      locale: localeObject,
+    });
+
+    const { renderWithProps } = buildFieldInteractions({
+      render,
+      clock,
+      Component: DateTimeField,
+    });
+
+    it('should set month, year, and date correctly', () => {
+      const initialDate = adapter.date('2022-01-15T09:35:00')!;
+      const newDate = adapter.setMonthYearDate(initialDate, 1400, 0, 25);
+
+      const v7Response = renderWithProps({
+        enableAccessibleFieldDOMStructure: true,
+        value: newDate,
+      });
+      expectFieldValueV7(v7Response.getSectionsContainer(), '01/25/1400 09:35 AM');
+    });
+  });
 });

packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts

@@ -557,4 +557,8 @@ export class AdapterMoment implements MuiPickersAdapter<Moment, string> {
 
     return years;
   }
+
+  public setMonthYearDate = (value: Moment, year: number, month: number, date: number) => {
+    return value.year(year).month(month).date(date);
+  };
 }

packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx

@@ -93,5 +93,31 @@ describe('<AdapterMomentHijri />', () => {
         });
       });
     });
+
+    describe('Test setMonthYearDate', () => {
+      const localeObject = { code: 'ar' };
+      const { render, clock, adapter } = createPickerRenderer({
+        clock: 'fake',
+        adapterName: 'moment-hijri',
+        locale: localeObject,
+      });
+
+      const { renderWithProps } = buildFieldInteractions({
+        render,
+        clock,
+        Component: DateTimeField,
+      });
+
+      it('should set month, year, and date correctly', () => {
+        const initialDate = adapter.date('2022-01-15T09:35:00')!;
+        const newDate = adapter.setMonthYearDate(initialDate, 1439, 4, 15);
+
+        const v7Response = renderWithProps({
+          enableAccessibleFieldDOMStructure: true,
+          value: newDate,
+        });
+        expectFieldValueV7(v7Response.getSectionsContainer(), '١٤٣٩/٠٥/١٥ ٠٩:٣٥');
+      });
+    });
   });
 });

packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts

@@ -238,4 +238,8 @@ export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapt
 
     return super.getYearRange([start, end]);
   };
+
+  public setMonthYearDate = (value: Moment, year: number, month: number, date: number) => {
+    return value.clone().iYear(year).iMonth(month).iDate(date);
+  };
 }

packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx

@@ -101,4 +101,30 @@ describe('<AdapterMomentJalaali />', () => {
       });
     });
   });
+
+  describe('Test setMonthYearDate', () => {
+    const localeObject = { code: 'en' };
+    const { render, clock, adapter } = createPickerRenderer({
+      clock: 'fake',
+      adapterName: 'moment-jalaali',
+      locale: localeObject,
+    });
+
+    const { renderWithProps } = buildFieldInteractions({
+      render,
+      clock,
+      Component: DateTimeField,
+    });
+
+    it('should set month, year, and date correctly', () => {
+      const initialDate = adapter.date('2022-01-15T09:35:00')!;
+      const newDate = adapter.setMonthYearDate(initialDate, 1400, 0, 25);
+
+      const v7Response = renderWithProps({
+        enableAccessibleFieldDOMStructure: true,
+        value: newDate,
+      });
+      expectFieldValueV7(v7Response.getSectionsContainer(), '1400/01/25 09:35');
+    });
+  });
 });

packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts

@@ -247,4 +247,8 @@ export class AdapterMomentJalaali
   public getWeekNumber = (value: Moment) => {
     return value.jWeek();
   };
+
+  public setMonthYearDate = (value: Moment, year: number, month: number, date: number): Moment => {
+    return value.clone().jYear(year).jMonth(month).jDate(date);
+  };
 }