@mui/x-date-pickers 6.1.0 → 6.2.0

package/legacy/AdapterDayjs/index.js

@@ -1,119 +1 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* eslint-disable class-methods-use-this */
-import defaultDayjs from 'dayjs';
-import weekOfYear from 'dayjs/plugin/weekOfYear';
-import BaseAdapterDayjs from '@date-io/dayjs';
-import { buildWarning } from '../internals/utils/warning';
-var localeNotFoundWarning = buildWarning(['Your locale has not been found.', 'Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale', "Or you forget to import the locale with `require('dayjs/locale/{localeUsed}')`", 'fallback on English locale']);
-var formatTokenMap = {
-  // Year
-  YY: 'year',
-  YYYY: 'year',
-  // Month
-  M: 'month',
-  MM: 'month',
-  MMM: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  MMMM: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  // Day of the month
-  D: 'day',
-  DD: 'day',
-  Do: 'day',
-  // Day of the week
-  d: 'weekDay',
-  dd: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  ddd: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  dddd: {
-    sectionType: 'weekDay',
-    contentType: 'letter'
-  },
-  // Meridiem
-  A: 'meridiem',
-  a: 'meridiem',
-  // Hours
-  H: 'hours',
-  HH: 'hours',
-  h: 'hours',
-  hh: 'hours',
-  // Minutes
-  m: 'minutes',
-  mm: 'minutes',
-  // Seconds
-  s: 'seconds',
-  ss: 'seconds'
-};
-export var AdapterDayjs = /*#__PURE__*/function (_BaseAdapterDayjs) {
-  _inherits(AdapterDayjs, _BaseAdapterDayjs);
-  var _super = _createSuper(AdapterDayjs);
-  function AdapterDayjs(options) {
-    var _this;
-    _classCallCheck(this, AdapterDayjs);
-    _this = _super.call(this, options);
-    _this.isMUIAdapter = true;
-    _this.formatTokenMap = formatTokenMap;
-    _this.escapedCharacters = {
-      start: '[',
-      end: ']'
-    };
-    _this.getLocaleFormats = function () {
-      var _this$rawDayJsInstanc;
-      var locales = (_this$rawDayJsInstanc = _this.rawDayJsInstance.Ls) != null ? _this$rawDayJsInstanc : defaultDayjs.Ls;
-      var locale = _this.locale || 'en';
-      var localeObject = locales[locale];
-      if (localeObject === undefined) {
-        localeNotFoundWarning();
-        localeObject = locales.en;
-      }
-      return localeObject.formats;
-    };
-    _this.is12HourCycleInCurrentLocale = function () {
-      /* istanbul ignore next */
-      return /A|a/.test(_this.getLocaleFormats().LT || '');
-    };
-    /**
-     * The current getFormatHelperText method uses an outdated format parsing logic.
-     * We should use this one in the future to support all localized formats.
-     */
-    _this.expandFormat = function (format) {
-      var localeFormats = _this.getLocaleFormats();
-
-      // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
-      var t = function t(formatBis) {
-        return formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function (_, a, b) {
-          return a || b.slice(1);
-        });
-      };
-      return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function (_, a, b) {
-        var B = b && b.toUpperCase();
-        return a || localeFormats[b] || t(localeFormats[B]);
-      });
-    };
-    // Redefined here just to show how it can be written using expandFormat
-    _this.getFormatHelperText = function (format) {
-      return _this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
-    };
-    _this.getWeekNumber = function (date) {
-      return date.week();
-    };
-    defaultDayjs.extend(weekOfYear);
-    return _this;
-  }
-  return _createClass(AdapterDayjs);
-}(BaseAdapterDayjs);
+export { AdapterDayjs } from './AdapterDayjs';

package/legacy/DateField/DateField.js

@@ -114,6 +114,12 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/legacy/DateField/useDateField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDate } from '../internals/hooks/validation/useDateValidation';
@@ -25,6 +25,7 @@ export var useDateField = function useDateField(_ref) {
     value = _useDefaultizedDateFi.value,
     defaultValue = _useDefaultizedDateFi.defaultValue,
     format = _useDefaultizedDateFi.format,
+    formatDensity = _useDefaultizedDateFi.formatDensity,
     onChange = _useDefaultizedDateFi.onChange,
     readOnly = _useDefaultizedDateFi.readOnly,
     onError = _useDefaultizedDateFi.onError,
@@ -46,6 +47,7 @@ export var useDateField = function useDateField(_ref) {
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/DatePicker/DatePicker.js

@@ -126,6 +126,12 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/DateTimeField/DateTimeField.js

@@ -124,6 +124,12 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/legacy/DateTimeField/useDateTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
@@ -30,6 +30,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
     value = _useDefaultizedDateTi.value,
     defaultValue = _useDefaultizedDateTi.defaultValue,
     format = _useDefaultizedDateTi.format,
+    formatDensity = _useDefaultizedDateTi.formatDensity,
     onChange = _useDefaultizedDateTi.onChange,
     readOnly = _useDefaultizedDateTi.readOnly,
     onError = _useDefaultizedDateTi.onError,
@@ -60,6 +61,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/DateTimePicker/DateTimePicker.js

@@ -141,6 +141,12 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/DateTimePicker/shared.js

@@ -37,7 +37,9 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     localeText: localeText,
     orientation: (_themeProps$orientati = themeProps.orientation) != null ? _themeProps$orientati : 'portrait',
     // TODO: Remove from public API
-    disableIgnoringDatePartForTimeValidation: (_themeProps$disableIg = themeProps.disableIgnoringDatePartForTimeValidation) != null ? _themeProps$disableIg : Boolean(themeProps.minDateTime || themeProps.maxDateTime),
+    disableIgnoringDatePartForTimeValidation: (_themeProps$disableIg = themeProps.disableIgnoringDatePartForTimeValidation) != null ? _themeProps$disableIg : Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
+    // allow time clock to correctly check time validity: https://github.com/mui/mui-x/issues/8520
+    themeProps.disablePast || themeProps.disableFuture),
     disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
     disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
     minDate: applyDefaultDate(utils, (_themeProps$minDateTi = themeProps.minDateTime) != null ? _themeProps$minDateTi : themeProps.minDate, defaultDates.minDate),

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -142,6 +142,12 @@ DesktopDatePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -165,6 +165,12 @@ DesktopDateTimePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -131,6 +131,12 @@ DesktopTimePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -139,6 +139,12 @@ MobileDatePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -163,6 +163,12 @@ MobileDateTimePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -130,6 +130,12 @@ MobileTimePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/TimeField/TimeField.js

@@ -124,6 +124,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */

package/legacy/TimeField/useTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/hooks/validation/useTimeValidation';
@@ -23,6 +23,7 @@ export var useTimeField = function useTimeField(_ref) {
     value = _useDefaultizedTimeFi.value,
     defaultValue = _useDefaultizedTimeFi.defaultValue,
     format = _useDefaultizedTimeFi.format,
+    formatDensity = _useDefaultizedTimeFi.formatDensity,
     onChange = _useDefaultizedTimeFi.onChange,
     readOnly = _useDefaultizedTimeFi.readOnly,
     onError = _useDefaultizedTimeFi.onError,
@@ -46,6 +47,7 @@ export var useTimeField = function useTimeField(_ref) {
       value: value,
       defaultValue: defaultValue,
       format: format,
+      formatDensity: formatDensity,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/TimePicker/TimePicker.js

@@ -115,6 +115,12 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Density of the format when rendered in the input.
+   * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
+   * @default "dense"
+   */
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
    */

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.1.0
+ * @mui/x-date-pickers v6.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -33,6 +33,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
     className = props.className,
     sx = props.sx,
     format = props.format,
+    formatDensity = props.formatDensity,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -98,6 +99,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       className: className,
       sx: sx,
       format: format,
+      formatDensity: formatDensity,
       label: label,
       autoFocus: autoFocus && !props.open
     }),

package/legacy/internals/hooks/useField/useField.utils.js

@@ -320,7 +320,7 @@ var getEscapedPartsFromFormat = function getEscapedPartsFromFormat(utils, format
   }
   return escapedParts;
 };
-export var splitFormatIntoSections = function splitFormatIntoSections(utils, localeText, format, date) {
+export var splitFormatIntoSections = function splitFormatIntoSections(utils, localeText, format, date, formatDensity) {
   var startSeparator = '';
   var sections = [];
   var commitToken = function commitToken(token) {
@@ -396,8 +396,8 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, loc
       if (cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
         cleanedSeparator = "\u2069".concat(cleanedSeparator, "\u2066");
       }
-      if (cleanedSeparator === '/') {
-        cleanedSeparator = ' / ';
+      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
+        cleanedSeparator = " ".concat(cleanedSeparator, " ");
       }
       return cleanedSeparator;
     };
@@ -615,13 +615,28 @@ var transferDateSectionValue = function transferDateSectionValue(utils, section,
       }
   }
 };
+var reliableSectionModificationOrder = {
+  year: 1,
+  month: 2,
+  day: 3,
+  weekDay: 4,
+  hours: 5,
+  minutes: 6,
+  seconds: 7,
+  meridiem: 8
+};
 export var mergeDateIntoReferenceDate = function mergeDateIntoReferenceDate(utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) {
-  return sections.reduce(function (mergedDate, section) {
-    if (!shouldLimitToEditedSections || section.modified) {
-      return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
-    }
-    return mergedDate;
-  }, referenceDate);
+  return (
+    // cloning sections before sort to avoid mutating it
+    _toConsumableArray(sections).sort(function (a, b) {
+      return reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type];
+    }).reduce(function (mergedDate, section) {
+      if (!shouldLimitToEditedSections || section.modified) {
+        return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
+      }
+      return mergedDate;
+    }, referenceDate)
+  );
 };
 export var isAndroid = function isAndroid() {
   return navigator.userAgent.toLowerCase().indexOf('android') > -1;

package/legacy/internals/hooks/useField/useFieldState.js

@@ -23,6 +23,8 @@ export var useFieldState = function useFieldState(params) {
     defaultValue = _params$internalProps.defaultValue,
     onChange = _params$internalProps.onChange,
     format = _params$internalProps.format,
+    _params$internalProps2 = _params$internalProps.formatDensity,
+    formatDensity = _params$internalProps2 === void 0 ? 'dense' : _params$internalProps2,
     selectedSectionsProp = _params$internalProps.selectedSections,
     onSelectedSectionsChange = _params$internalProps.onSelectedSectionsChange;
   var firstDefaultValue = React.useRef(defaultValue);
@@ -33,9 +35,9 @@ export var useFieldState = function useFieldState(params) {
   var getSectionsFromValue = React.useCallback(function (value) {
     var fallbackSections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, function (date) {
-      return splitFormatIntoSections(utils, localeText, format, date);
+      return splitFormatIntoSections(utils, localeText, format, date, formatDensity);
     });
-  }, [fieldValueManager, format, localeText, isRTL, utils]);
+  }, [fieldValueManager, format, localeText, isRTL, utils, formatDensity]);
   var placeholder = React.useMemo(function () {
     return fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL);
   }, [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
@@ -176,7 +178,7 @@ export var useFieldState = function useFieldState(params) {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      var sections = splitFormatIntoSections(utils, localeText, format, date);
+      var sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity);
       return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
     };
     var newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);

package/legacy/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -28,6 +28,7 @@ export var useMobilePicker = function useMobilePicker(_ref) {
     className = props.className,
     sx = props.sx,
     format = props.format,
+    formatDensity = props.formatDensity,
     label = props.label,
     inputRef = props.inputRef,
     readOnly = props.readOnly,
@@ -66,6 +67,7 @@ export var useMobilePicker = function useMobilePicker(_ref) {
       className: className,
       sx: sx,
       format: format,
+      formatDensity: formatDensity,
       label: label
     }),
     ownerState: props