@mui/x-date-pickers 6.7.0 → 6.9.0

package/node/AdapterDayjs/AdapterDayjs.js

@@ -191,9 +191,27 @@ class AdapterDayjs {
       const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
       return value.format(comparisonTemplate) === comparingInValueTimezone.format(comparisonTemplate);
     };
+    /**
+     * Replace "default" by undefined before passing it to `dayjs
+     */
+    this.cleanTimezone = timezone => timezone === 'default' ? undefined : timezone;
     this.createSystemDate = value => {
       // TODO v7: Stop using `this.rawDayJsInstance` (drop the `instance` param on the adapters)
-      return this.rawDayJsInstance(value);
+      /* istanbul ignore next */
+      if (this.rawDayJsInstance) {
+        return this.rawDayJsInstance(value);
+      }
+      if (this.hasUTCPlugin() && this.hasTimezonePlugin()) {
+        const timezone = _dayjs.default.tz.guess();
+
+        // We can't change the system timezone in the tests
+        /* istanbul ignore next */
+        if (timezone !== 'UTC') {
+          return _dayjs.default.tz(value, timezone);
+        }
+        return (0, _dayjs.default)(value);
+      }
+      return (0, _dayjs.default)(value);
     };
     this.createUTCDate = value => {
       /* istanbul ignore next */
@@ -212,9 +230,8 @@ class AdapterDayjs {
       if (!this.hasTimezonePlugin()) {
         throw new Error(MISSING_TIMEZONE_PLUGIN);
       }
-      const cleanTimezone = timezone === 'default' ? undefined : timezone;
       const keepLocalTime = value !== undefined && !value.endsWith('Z');
-      return (0, _dayjs.default)(value).tz(cleanTimezone, keepLocalTime);
+      return (0, _dayjs.default)(value).tz(this.cleanTimezone(timezone), keepLocalTime);
     };
     this.getLocaleFormats = () => {
       const locales = _dayjs.default.Ls;
@@ -271,11 +288,12 @@ class AdapterDayjs {
         }
         return value.utc();
       }
+
+      // We know that we have the UTC plugin.
+      // Otherwise, the value timezone would always equal "system".
+      // And it would be caught by the first "if" of this method.
       if (timezone === 'system') {
-        if (this.hasUTCPlugin()) {
-          return value.local();
-        }
-        return value;
+        return value.local();
       }
       if (!this.hasTimezonePlugin()) {
         if (timezone === 'default') {
@@ -285,8 +303,7 @@ class AdapterDayjs {
         /* istanbul ignore next */
         throw new Error(MISSING_TIMEZONE_PLUGIN);
       }
-      const cleanZone = timezone === 'default' ? undefined : timezone;
-      return _dayjs.default.tz(value, cleanZone);
+      return _dayjs.default.tz(value, this.cleanTimezone(timezone));
     };
     this.toJsDate = value => {
       return value.toDate();
@@ -345,7 +362,7 @@ class AdapterDayjs {
       if (value === null && comparing === null) {
         return true;
       }
-      return this.dayjs(value).isSame(comparing);
+      return this.dayjs(value).toDate().getTime() === this.dayjs(comparing).toDate().getTime();
     };
     this.isSameYear = (value, comparing) => {
       return this.isSame(value, comparing, 'YYYY');
@@ -505,9 +522,10 @@ class AdapterDayjs {
       return [0, 1, 2, 3, 4, 5, 6].map(diff => this.formatByString(start.add(diff, 'day'), 'dd'));
     };
     this.getWeekArray = value => {
-      const cleanLocale = this.setLocaleToValue(value);
-      const start = cleanLocale.startOf('month').startOf('week');
-      const end = cleanLocale.endOf('month').endOf('week');
+      const timezone = this.getTimezone(value);
+      const cleanValue = this.setLocaleToValue(value);
+      const start = cleanValue.startOf('month').startOf('week');
+      const end = cleanValue.endOf('month').endOf('week');
       let count = 0;
       let current = start;
       const nestedWeeks = [];
@@ -516,6 +534,14 @@ class AdapterDayjs {
         nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
         nestedWeeks[weekNumber].push(current);
         current = current.add(1, 'day');
+
+        // If the new day does not have the same offset as the old one (when switching to summer day time for example),
+        // Then dayjs will not automatically adjust the offset (moment does)
+        // We have to parse again the value to make sure the `fixOffset` method is applied
+        // See https://github.com/iamkun/dayjs/blob/b3624de619d6e734cd0ffdbbd3502185041c1b60/src/plugin/timezone/index.js#L72
+        if (this.hasTimezonePlugin() && timezone !== 'UTC' && timezone !== 'system') {
+          current = current.tz(this.cleanTimezone(timezone), true);
+        }
         count += 1;
       }
       return nestedWeeks;
@@ -537,8 +563,8 @@ class AdapterDayjs {
     this.getMeridiemText = ampm => {
       return ampm === 'am' ? 'AM' : 'PM';
     };
-    this.rawDayJsInstance = instance || _dayjs.default;
-    this.dayjs = withLocale(this.rawDayJsInstance, _locale);
+    this.rawDayJsInstance = instance;
+    this.dayjs = withLocale(this.rawDayJsInstance ?? _dayjs.default, _locale);
     this.locale = _locale;
     this.formats = (0, _extends2.default)({}, defaultFormats, formats);
     _dayjs.default.extend(_weekOfYear.default);

package/node/AdapterLuxon/AdapterLuxon.js

@@ -186,6 +186,13 @@ class AdapterLuxon {
       end: "'"
     };
     this.formatTokenMap = formatTokenMap;
+    this.setLocaleToValue = value => {
+      const expectedLocale = this.getCurrentLocaleCode();
+      if (expectedLocale === value.locale) {
+        return value;
+      }
+      return value.setLocale(expectedLocale);
+    };
     this.date = value => {
       if (typeof value === 'undefined') {
         return _luxon.DateTime.local();
@@ -231,7 +238,7 @@ class AdapterLuxon {
       if (value.zone.type === 'system') {
         return 'system';
       }
-      return value.zoneName ?? 'system';
+      return value.zoneName;
     };
     this.setTimezone = (value, timezone) => {
       if (!value.zone.equals(_luxon.Info.normalizeZone(timezone))) {
@@ -246,7 +253,7 @@ class AdapterLuxon {
       return _luxon.DateTime.fromISO(isoString);
     };
     this.toISO = value => {
-      return value.toISO({
+      return value.toUTC().toISO({
         format: 'extended'
       });
     };
@@ -528,11 +535,12 @@ class AdapterLuxon {
       });
     };
     this.getWeekArray = value => {
+      const cleanValue = this.setLocaleToValue(value);
       const {
         days
-      } = value.endOf('month').endOf('week').diff(value.startOf('month').startOf('week'), 'days').toObject();
+      } = cleanValue.endOf('month').endOf('week').diff(cleanValue.startOf('month').startOf('week'), 'days').toObject();
       const weeks = [];
-      new Array(Math.round(days)).fill(0).map((_, i) => i).map(day => value.startOf('month').startOf('week').plus({
+      new Array(Math.round(days)).fill(0).map((_, i) => i).map(day => cleanValue.startOf('month').startOf('week').plus({
         days: day
       })).forEach((v, i) => {
         if (i === 0 || i % 7 === 0 && i > 6) {

package/node/AdapterMoment/AdapterMoment.js

@@ -14,7 +14,11 @@ const formatTokenMap = {
   // Year
   Y: 'year',
   YY: 'year',
-  YYYY: 'year',
+  YYYY: {
+    sectionType: 'year',
+    contentType: 'digit',
+    maxLength: 4
+  },
   // Month
   M: {
     sectionType: 'month',
@@ -240,6 +244,9 @@ class AdapterMoment {
       return zone ?? this.moment.defaultZone?.name ?? 'system';
     };
     this.setTimezone = (value, timezone) => {
+      if (this.getTimezone(value) === timezone) {
+        return value;
+      }
       if (timezone === 'UTC') {
         return value.clone().utc();
       }
@@ -247,16 +254,18 @@ class AdapterMoment {
         return value.clone().local();
       }
       if (!this.hasTimezonePlugin()) {
-        if (timezone === 'default') {
-          return value;
-        }
-
         /* istanbul ignore next */
-        throw new Error(MISSING_TIMEZONE_PLUGIN);
+        if (timezone !== 'default') {
+          throw new Error(MISSING_TIMEZONE_PLUGIN);
+        }
+        return value;
       }
       const cleanZone = timezone === 'default' ?
       // @ts-ignore
       this.moment.defaultZone?.name ?? 'system' : timezone;
+      if (cleanZone === 'system') {
+        return value.clone().local();
+      }
       const newValue = value.clone();
       newValue.tz(cleanZone);
       return newValue;
@@ -470,9 +479,9 @@ class AdapterMoment {
       return _moment.default.weekdaysShort(true);
     };
     this.getWeekArray = value => {
-      const cleanLocale = this.setLocaleToValue(value);
-      const start = cleanLocale.clone().startOf('month').startOf('week');
-      const end = cleanLocale.clone().endOf('month').endOf('week');
+      const cleanValue = this.setLocaleToValue(value);
+      const start = cleanValue.clone().startOf('month').startOf('week');
+      const end = cleanValue.clone().endOf('month').endOf('week');
       let count = 0;
       let current = start;
       const nestedWeeks = [];

package/node/DateCalendar/DateCalendar.js

@@ -24,8 +24,10 @@ var _dateUtils = require("../internals/utils/date-utils");
 var _PickerViewRoot = require("../internals/components/PickerViewRoot");
 var _defaultReduceAnimations = require("../internals/utils/defaultReduceAnimations");
 var _dateCalendarClasses = require("./dateCalendarClasses");
+var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
+var _valueManagers = require("../internals/utils/valueManagers");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow"];
+const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -92,6 +94,7 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       onViewChange,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disableFuture,
       disablePast,
       defaultCalendarMonth,
@@ -124,18 +127,21 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       renderLoading,
       displayWeekNumber,
       yearsPerRow,
-      monthsPerRow
+      monthsPerRow,
+      timezone: timezoneProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [value, setValue] = (0, _utils.unstable_useControlled)({
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
     name: 'DateCalendar',
-    state: 'value',
-    controlled: valueProp,
-    default: defaultValue ?? null
-  });
-  const handleValueChange = (0, _utils.unstable_useEventCallback)((newValue, selectionState) => {
-    setValue(newValue);
-    onChange?.(newValue, selectionState);
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: _valueManagers.singleItemValueManager
   });
   const {
     view,
@@ -155,6 +161,7 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
     onFocusedViewChange
   });
   const {
+    referenceDate,
     calendarState,
     changeFocusedDay,
     changeMonth,
@@ -164,13 +171,15 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
   } = (0, _useCalendarState.useCalendarState)({
     value,
     defaultCalendarMonth,
+    referenceDate: referenceDateProp,
     reduceAnimations,
     onMonthChange,
     minDate,
     maxDate,
     shouldDisableDate,
     disablePast,
-    disableFuture
+    disableFuture,
+    timezone
   });
   const handleDateMonthChange = (0, _utils.unstable_useEventCallback)(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
@@ -182,7 +191,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
       disablePast,
       disableFuture,
-      isDateDisabled
+      isDateDisabled,
+      timezone
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
@@ -203,7 +213,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       maxDate: utils.isAfter(maxDate, endOfYear) ? endOfYear : maxDate,
       disablePast,
       disableFuture,
-      isDateDisabled
+      isDateDisabled,
+      timezone
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
@@ -215,9 +226,9 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
     changeFocusedDay(closestEnabledDate, true);
   });
   const handleSelectedDayChange = (0, _utils.unstable_useEventCallback)(day => {
-    if (value && day) {
+    if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value), 'finish');
+      return handleValueChange((0, _dateUtils.mergeDateAndTime)(utils, day, value ?? referenceDate), 'finish');
     }
     return handleValueChange(day, 'finish');
   });
@@ -242,7 +253,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
-    disabled
+    disabled,
+    timezone
   };
   const gridLabelId = `${id}-grid-label`;
   const hasFocus = focusedView !== null;
@@ -281,7 +293,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
       reduceAnimations: reduceAnimations,
       labelId: gridLabelId,
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      timezone: timezone
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateCalendarViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
@@ -294,7 +307,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
-          yearsPerRow: yearsPerRow
+          yearsPerRow: yearsPerRow,
+          referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthCalendar.MonthCalendar, (0, _extends2.default)({}, baseDateValidationProps, commonViewProps, {
           hasFocus: hasFocus,
           className: className,
@@ -302,7 +316,8 @@ const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps
           onChange: handleDateMonthChange,
           shouldDisableMonth: shouldDisableMonth,
           onFocusedViewChange: isViewFocused => setFocusedView('month', isViewFocused),
-          monthsPerRow: monthsPerRow
+          monthsPerRow: monthsPerRow,
+          referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayCalendar.DayCalendar, (0, _extends2.default)({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
@@ -365,7 +380,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: _propTypes.default.any,
   /**
@@ -474,6 +489,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: _propTypes.default.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: _propTypes.default.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -526,6 +546,14 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: _propTypes.default.string,
   /**
    * The selected value.
    * Used when the component is controlled.

package/node/DateCalendar/DayCalendar.js

@@ -146,8 +146,6 @@ function WrappedDay(_ref) {
       isViewFocused
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const utils = (0, _useUtils.useUtils)();
-  const now = (0, _useUtils.useNow)();
   const {
     disabled,
     disableHighlightToday,
@@ -156,8 +154,11 @@ function WrappedDay(_ref) {
     components,
     componentsProps,
     slots,
-    slotProps
+    slotProps,
+    timezone
   } = parentProps;
+  const utils = (0, _useUtils.useUtils)();
+  const now = (0, _useUtils.useNow)(timezone);
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
@@ -215,15 +216,10 @@ function WrappedDay(_ref) {
  * @ignore - do not document.
  */
 function DayCalendar(inProps) {
-  const now = (0, _useUtils.useNow)();
-  const utils = (0, _useUtils.useUtils)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDayCalendar'
   });
-  const classes = useUtilityClasses(props);
-  const theme = (0, _styles.useTheme)();
-  const isRTL = theme.direction === 'rtl';
   const {
     onFocusedDayChange,
     className,
@@ -253,8 +249,14 @@ function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus
+    autoFocus,
+    timezone
   } = props;
+  const now = (0, _useUtils.useNow)(timezone);
+  const utils = (0, _useUtils.useUtils)();
+  const classes = useUtilityClasses(props);
+  const theme = (0, _styles.useTheme)();
+  const isRTL = theme.direction === 'rtl';
   const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     shouldDisableMonth,
@@ -262,7 +264,8 @@ function DayCalendar(inProps) {
     minDate,
     maxDate,
     disablePast,
-    disableFuture
+    disableFuture,
+    timezone
   });
   const localeText = (0, _useUtils.useLocaleText)();
   const [internalHasFocus, setInternalHasFocus] = (0, _utils2.unstable_useControlled)({
@@ -305,7 +308,8 @@ function DayCalendar(inProps) {
             date: newFocusedDayDefault,
             minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
             maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            isDateDisabled
+            isDateDisabled,
+            timezone
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
           event.preventDefault();
@@ -320,7 +324,8 @@ function DayCalendar(inProps) {
             date: newFocusedDayDefault,
             minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
-            isDateDisabled
+            isDateDisabled,
+            timezone
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
           event.preventDefault();
@@ -371,14 +376,16 @@ function DayCalendar(inProps) {
         maxDate: endOfMonth,
         disablePast,
         disableFuture,
-        isDateDisabled
+        isDateDisabled,
+        timezone
       });
     }
     return internalFocusedDay;
-  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils]);
+  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
-    const toDisplay = utils.getWeekArray(currentMonth);
-    let nextMonth = utils.addMonths(currentMonth, 1);
+    const currentMonthWithTimezone = utils.setTimezone(currentMonth, timezone);
+    const toDisplay = utils.getWeekArray(currentMonthWithTimezone);
+    let nextMonth = utils.addMonths(currentMonthWithTimezone, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
       const additionalWeeks = utils.getWeekArray(nextMonth);
       const hasCommonWeek = utils.isSameDay(toDisplay[toDisplay.length - 1][0], additionalWeeks[0][0]);
@@ -390,7 +397,7 @@ function DayCalendar(inProps) {
       nextMonth = utils.addMonths(nextMonth, 1);
     }
     return toDisplay;
-  }, [currentMonth, fixedWeekNumber, utils]);
+  }, [currentMonth, fixedWeekNumber, utils, timezone]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "grid",
     "aria-labelledby": gridLabelId,

package/node/DateCalendar/PickersCalendarHeader.js

@@ -122,7 +122,8 @@ function PickersCalendarHeader(inProps) {
     view,
     reduceAnimations,
     views,
-    labelId
+    labelId,
+    timezone
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(props);
@@ -150,11 +151,13 @@ function PickersCalendarHeader(inProps) {
   const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
   const isNextMonthDisabled = (0, _dateHelpersHooks.useNextMonthDisabled)(month, {
     disableFuture,
-    maxDate
+    maxDate,
+    timezone
   });
   const isPreviousMonthDisabled = (0, _dateHelpersHooks.usePreviousMonthDisabled)(month, {
     disablePast,
-    minDate
+    minDate,
+    timezone
   });
   const handleToggleView = () => {
     if (views.length === 1 || !onViewChange || disabled) {

package/node/DateCalendar/useCalendarState.js

@@ -10,7 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useIsDateDisabled = require("./useIsDateDisabled");
 var _useUtils = require("../internals/hooks/useUtils");
-var _dateUtils = require("../internals/utils/date-utils");
+var _valueManagers = require("../internals/utils/valueManagers");
+var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
@@ -43,25 +44,47 @@ const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayF
   }
 };
 exports.createCalendarStateReducer = createCalendarStateReducer;
-const useCalendarState = ({
-  value,
-  defaultCalendarMonth,
-  disableFuture,
-  disablePast,
-  disableSwitchToMonthOnDayFocus = false,
-  maxDate,
-  minDate,
-  onMonthChange,
-  reduceAnimations,
-  shouldDisableDate
-}) => {
-  const now = (0, _useUtils.useNow)();
+const useCalendarState = params => {
+  const {
+    value,
+    referenceDate: referenceDateProp,
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus = false,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate,
+    timezone
+  } = params;
+  const now = (0, _useUtils.useNow)(timezone);
   const utils = (0, _useUtils.useUtils)();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const referenceDate = React.useMemo(() => {
+    let externalReferenceDate = null;
+    if (referenceDateProp) {
+      externalReferenceDate = referenceDateProp;
+    } else if (defaultCalendarMonth) {
+      // For `defaultCalendarMonth`, we just want to keep the month and the year to avoid a behavior change.
+      externalReferenceDate = utils.startOfMonth(defaultCalendarMonth);
+    }
+    return _valueManagers.singleItemValueManager.getInitialReferenceValue({
+      value,
+      utils,
+      timezone,
+      props: params,
+      referenceDate: externalReferenceDate,
+      granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.day
+    });
+  }, [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: value || now,
-    currentMonth: utils.startOfMonth(value ?? defaultCalendarMonth ?? (0, _dateUtils.clamp)(utils, now, minDate, maxDate)),
+    currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
   const handleChangeMonth = React.useCallback(payload => {
@@ -87,7 +110,8 @@ const useCalendarState = ({
     minDate,
     maxDate,
     disableFuture,
-    disablePast
+    disablePast,
+    timezone
   });
   const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({
@@ -104,6 +128,7 @@ const useCalendarState = ({
     }
   });
   return {
+    referenceDate,
     calendarState,
     changeMonth,
     changeFocusedDay,

package/node/DateCalendar/useIsDateDisabled.js

@@ -16,7 +16,8 @@ const useIsDateDisabled = ({
   minDate,
   maxDate,
   disableFuture,
-  disablePast
+  disablePast,
+  timezone
 }) => {
   const adapter = (0, _useUtils.useLocalizationContext)();
   return React.useCallback(day => (0, _validateDate.validateDate)({
@@ -29,8 +30,9 @@ const useIsDateDisabled = ({
       minDate,
       maxDate,
       disableFuture,
-      disablePast
+      disablePast,
+      timezone
     }
-  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast]);
+  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, timezone]);
 };
 exports.useIsDateDisabled = useIsDateDisabled;