@mui/x-date-pickers 6.6.0 → 6.8.0

package/DateCalendar/DateCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -84,6 +84,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       onViewChange,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disableFuture,
       disablePast,
       defaultCalendarMonth,
@@ -147,6 +148,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     onFocusedViewChange
   });
   const {
+    referenceDate,
     calendarState,
     changeFocusedDay,
     changeMonth,
@@ -156,6 +158,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   } = useCalendarState({
     value,
     defaultCalendarMonth,
+    referenceDate: referenceDateProp,
     reduceAnimations,
     onMonthChange,
     minDate,
@@ -207,9 +210,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     changeFocusedDay(closestEnabledDate, true);
   });
   const handleSelectedDayChange = useEventCallback(day => {
-    if (value && day) {
+    if (day) {
       // If there is a date already selected, then we want to keep its time
-      return handleValueChange(mergeDateAndTime(utils, day, value), 'finish');
+      return handleValueChange(mergeDateAndTime(utils, day, value != null ? value : referenceDate), 'finish');
     }
     return handleValueChange(day, 'finish');
   });
@@ -286,7 +289,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('year', isViewFocused),
-          yearsPerRow: yearsPerRow
+          yearsPerRow: yearsPerRow,
+          referenceDate: referenceDate
         })), view === 'month' && /*#__PURE__*/_jsx(MonthCalendar, _extends({}, baseDateValidationProps, commonViewProps, {
           hasFocus: hasFocus,
           className: className,
@@ -294,7 +298,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           onChange: handleDateMonthChange,
           shouldDisableMonth: shouldDisableMonth,
           onFocusedViewChange: isViewFocused => setFocusedView('month', isViewFocused),
-          monthsPerRow: monthsPerRow
+          monthsPerRow: monthsPerRow,
+          referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
@@ -356,7 +361,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**
@@ -465,6 +470,11 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/DateCalendar/DateCalendar.types.d.ts

@@ -18,7 +18,7 @@ export interface DateCalendarSlotsComponentsProps<TDate> extends PickersCalendar
 }
 export interface ExportedDateCalendarProps<TDate> extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate> {
     /**
-     * Default calendar month displayed when `value={null}`.
+     * Default calendar month displayed when `value` and `defaultValue` are empty.
      */
     defaultCalendarMonth?: TDate;
     /**
@@ -66,6 +66,11 @@ export interface DateCalendarProps<TDate> extends ExportedDateCalendarProps<TDat
      * Used when the component is not controlled.
      */
     defaultValue?: TDate | null;
+    /**
+     * 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?: TDate;
     /**
      * Callback fired when the value changes.
      * @template TDate

package/DateCalendar/useCalendarState.d.ts

@@ -25,10 +25,11 @@ interface ChangeFocusedDayPayload<TDate> {
 export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate, any>) => (state: CalendarState<TDate>, action: {
     type: "finishMonthSwitchingAnimation";
 } | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
-interface CalendarStateInput<TDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+interface UseCalendarStateParams<TDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'referenceDate' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
 }
-export declare const useCalendarState: <TDate extends unknown>({ value, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {
+export declare const useCalendarState: <TDate extends unknown>(params: UseCalendarStateParams<TDate>) => {
+    referenceDate: any;
     calendarState: CalendarState<TDate>;
     changeMonth: (newDate: TDate) => void;
     changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean | undefined) => void;

package/DateCalendar/useCalendarState.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
-import { clamp } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
   switch (action.type) {
     case 'changeMonth':
@@ -33,26 +34,45 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
       throw new Error('missing support');
   }
 };
-export const useCalendarState = ({
-  value,
-  defaultCalendarMonth,
-  disableFuture,
-  disablePast,
-  disableSwitchToMonthOnDayFocus = false,
-  maxDate,
-  minDate,
-  onMonthChange,
-  reduceAnimations,
-  shouldDisableDate
-}) => {
-  var _ref;
+export const useCalendarState = params => {
+  const {
+    value,
+    referenceDate: referenceDateProp,
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus = false,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate
+  } = params;
   const now = useNow();
   const utils = 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 singleItemValueManager.getInitialReferenceValue({
+      value,
+      utils,
+      props: params,
+      referenceDate: externalReferenceDate,
+      granularity: 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((_ref = value != null ? value : defaultCalendarMonth) != null ? _ref : clamp(utils, now, minDate, maxDate)),
+    currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
   const handleChangeMonth = React.useCallback(payload => {
@@ -95,6 +115,7 @@ export const useCalendarState = ({
     }
   });
   return {
+    referenceDate,
     calendarState,
     changeMonth,
     changeFocusedDay,

package/DateField/DateField.js

@@ -230,7 +230,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */

package/DatePicker/DatePicker.js

@@ -73,7 +73,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/DatePicker/DatePickerToolbar.js

@@ -8,8 +8,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbar } from '../internals/components/PickersToolbar';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { isYearOnlyView, isYearAndMonthViews } from '../internals/utils/views';
 import { getDatePickerToolbarUtilityClass } from './datePickerToolbarClasses';
+import { resolveDateFormat } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -59,20 +59,11 @@ const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolb
     if (!value) {
       return toolbarPlaceholder;
     }
-    if (toolbarFormat) {
-      return utils.formatByString(value, toolbarFormat);
-    }
-    if (isYearOnlyView(views)) {
-      return utils.format(value, 'year');
-    }
-    if (isYearAndMonthViews(views)) {
-      return utils.format(value, 'month');
-    }
-
-    // Little localization hack (Google is doing the same for android native pickers):
-    // For english localization it is convenient to include weekday into the date "Mon, Jun 1".
-    // For other locales using strings like "June 1", without weekday.
-    return /en/.test(utils.getCurrentLocaleCode()) ? utils.format(value, 'normalDateWithWeekday') : utils.format(value, 'normalDate');
+    const formatFromViews = resolveDateFormat(utils, {
+      format: toolbarFormat,
+      views
+    }, true);
+    return utils.formatByString(value, formatFromViews);
   }, [value, toolbarFormat, toolbarPlaceholder, utils, views]);
   const ownerState = props;
   return /*#__PURE__*/_jsx(DatePickerToolbarRoot, _extends({

package/DatePicker/shared.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultizedProps } from '../internals/models/helpers';
 import { DateCalendarSlotsComponent, DateCalendarSlotsComponentsProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
-import { DateValidationError, DateView, MuiPickersAdapter } from '../models';
+import { DateValidationError, DateView } from '../models';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
 import { BaseDateValidationProps, UncapitalizeObjectKeys } from '../internals';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
@@ -49,9 +49,5 @@ export interface BaseDatePickerProps<TDate> extends BasePickerInputProps<TDate |
     viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, DateView, DateViewRendererProps<TDate, DateView>, {}>>;
 }
 type UseDatePickerDefaultizedProps<TDate, Props extends BaseDatePickerProps<TDate>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps<TDate>>, 'components' | 'componentsProps'>>;
-export declare const getDatePickerFieldFormat: (utils: MuiPickersAdapter<any>, { format, views }: {
-    format?: string | undefined;
-    views: readonly DateView[];
-}) => string | undefined;
 export declare function useDatePickerDefaultizedProps<TDate, Props extends BaseDatePickerProps<TDate>>(props: Props, name: string): UseDatePickerDefaultizedProps<TDate, Props>;
 export {};

package/DatePicker/shared.js

@@ -2,25 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
-import { applyDefaultViewProps, isYearAndMonthViews, isYearOnlyView } from '../internals/utils/views';
+import { applyDefaultViewProps } from '../internals/utils/views';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { DatePickerToolbar } from './DatePickerToolbar';
 import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
-export const getDatePickerFieldFormat = (utils, {
-  format,
-  views
-}) => {
-  if (format != null) {
-    return format;
-  }
-  if (isYearOnlyView(views)) {
-    return utils.formats.year;
-  }
-  if (isYearAndMonthViews(views)) {
-    return utils.formats.monthAndYear;
-  }
-  return undefined;
-};
 export function useDatePickerDefaultizedProps(props, name) {
   var _themeProps$slots, _themeProps$disableFu, _themeProps$disablePa, _themeProps$slotProps;
   const utils = useUtils();

package/DateTimeField/DateTimeField.js

@@ -263,7 +263,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */

package/DateTimePicker/DateTimePicker.js

@@ -83,7 +83,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/DesktopDatePicker/DesktopDatePicker.js

@@ -3,13 +3,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { getDatePickerFieldFormat, useDatePickerDefaultizedProps } from '../DatePicker/shared';
+import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { CalendarIcon } from '../icons';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
+import { resolveDateFormat } from '../internals/utils/date-utils';
 const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
   var _defaultizedProps$yea, _defaultizedProps$slo2;
   const localeText = useLocaleText();
@@ -26,7 +27,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: getDatePickerFieldFormat(utils, defaultizedProps),
+    format: resolveDateFormat(utils, defaultizedProps, false),
     yearsPerRow: (_defaultizedProps$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     slots: _extends({
       openPickerIcon: CalendarIcon,
@@ -96,7 +97,7 @@ DesktopDatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -7,13 +7,16 @@ import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
 import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
 import { renderDesktopDateTimeView } from '../dateTimeViewRenderers';
-import { useLocaleText, validateDateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { CalendarIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
+import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4;
   const localeText = useLocaleText();
+  const utils = useUtils();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
@@ -49,6 +52,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     views: defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views,
     yearsPerRow: (_defaultizedProps$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     ampmInClock,
@@ -139,7 +143,7 @@ DesktopDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/DesktopTimePicker/DesktopTimePicker.js

@@ -5,14 +5,17 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, validateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { ClockIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
+import { resolveTimeFormat } from '../internals/utils/time-utils';
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
   var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
+  const utils = useUtils();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
@@ -41,6 +44,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     ampmInClock,
     timeSteps,
     viewRenderers,
+    format: resolveTimeFormat(utils, defaultizedProps),
     // Setting only `hours` time view in case of single column time picker
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,

package/LocalizationProvider/LocalizationProvider.js

@@ -112,6 +112,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
     keyboardDateTime: PropTypes.string,
     keyboardDateTime12h: PropTypes.string,
     keyboardDateTime24h: PropTypes.string,
+    meridiem: PropTypes.string,
     minutes: PropTypes.string,
     month: PropTypes.string,
     monthAndDate: PropTypes.string,

package/MobileDatePicker/MobileDatePicker.js

@@ -3,12 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
-import { getDatePickerFieldFormat, useDatePickerDefaultizedProps } from '../DatePicker/shared';
+import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
+import { resolveDateFormat } from '../internals/utils/date-utils';
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
   var _defaultizedProps$slo2;
   const localeText = useLocaleText();
@@ -25,7 +26,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
-    format: getDatePickerFieldFormat(utils, defaultizedProps),
+    format: resolveDateFormat(utils, defaultizedProps, false),
     slots: _extends({
       field: DateField
     }, defaultizedProps.slots),
@@ -93,7 +94,7 @@ MobileDatePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -5,14 +5,17 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { useLocaleText, validateDateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { renderTimeViewClock } from '../timeViewRenderers';
+import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
+  const utils = useUtils();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
@@ -29,6 +32,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     ampmInClock,
     slots: _extends({
       field: DateTimeField
@@ -111,7 +115,7 @@ MobileDateTimePicker.propTypes = {
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
-   * Default calendar month displayed when `value={null}`.
+   * Default calendar month displayed when `value` and `defaultValue` are empty.
    */
   defaultCalendarMonth: PropTypes.any,
   /**

package/MobileTimePicker/MobileTimePicker.js

@@ -5,13 +5,16 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, validateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderTimeViewClock } from '../timeViewRenderers';
+import { resolveTimeFormat } from '../internals/utils/time-utils';
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2;
   const localeText = useLocaleText();
+  const utils = useUtils();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiMobileTimePicker');
@@ -26,6 +29,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
   const props = _extends({}, defaultizedProps, {
     ampmInClock,
     viewRenderers,
+    format: resolveTimeFormat(utils, defaultizedProps),
     slots: _extends({
       field: TimeField
     }, defaultizedProps.slots),

package/MonthCalendar/MonthCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "value", "defaultValue", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,6 +11,8 @@ import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getMonthCalendarUtilityClass } from './monthCalendarClasses';
 import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils';
+import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -56,6 +58,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       className,
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       disabled,
       disableFuture,
       disablePast,
@@ -80,8 +83,16 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    utils,
+    props,
+    referenceDate: referenceDateProp,
+    granularity: SECTION_TYPE_GRANULARITY.month
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
-  const selectedDateOrStartOfMonth = React.useMemo(() => value != null ? value : utils.startOfMonth(now), [now, utils, value]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
       return utils.getMonth(value);
@@ -89,8 +100,8 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     if (disableHighlightToday) {
       return null;
     }
-    return utils.getMonth(now);
-  }, [now, value, utils, disableHighlightToday]);
+    return utils.getMonth(referenceDate);
+  }, [value, utils, disableHighlightToday, referenceDate]);
   const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'MonthCalendar',
@@ -104,30 +115,31 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = React.useCallback(month => {
+  const isMonthDisabled = React.useCallback(dateToValidate => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    if (utils.isBefore(month, firstEnabledMonth)) {
+    const monthToValidate = utils.startOfMonth(dateToValidate);
+    if (utils.isBefore(monthToValidate, firstEnabledMonth)) {
       return true;
     }
-    if (utils.isAfter(month, lastEnabledMonth)) {
+    if (utils.isAfter(monthToValidate, lastEnabledMonth)) {
       return true;
     }
     if (!shouldDisableMonth) {
       return false;
     }
-    return shouldDisableMonth(month);
+    return shouldDisableMonth(monthToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   const handleMonthSelection = useEventCallback((event, month) => {
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(selectedDateOrStartOfMonth, month);
+    const newDate = utils.setMonth(value != null ? value : referenceDate, month);
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
   const focusMonth = useEventCallback(month => {
-    if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
+    if (!isMonthDisabled(utils.setMonth(value != null ? value : referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -175,7 +187,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: getMonthsInYear(utils, selectedDateOrStartOfMonth).map(month => {
+    children: getMonthsInYear(utils, value != null ? value : referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;
@@ -261,6 +273,11 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * If `true` picker is readonly
    */
   readOnly: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid month using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate: PropTypes.any,
   /**
    * Disable specific month.
    * @template TDate