@mui/x-date-pickers 6.5.0 → 6.7.0

package/modern/YearCalendar/YearCalendar.js

@@ -107,7 +107,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isYearDisabled = useEventCallback(dateToValidate => {
+  const isYearDisabled = React.useCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
     }
@@ -124,7 +124,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       return true;
     }
     return false;
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   const handleYearSelection = useEventCallback((event, year) => {
     if (readOnly) {
       return;

package/modern/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -0,0 +1,147 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import Divider from '@mui/material/Divider';
+import { resolveComponentProps } from '@mui/base/utils';
+import { DateCalendar } from '../DateCalendar';
+import { MultiSectionDigitalClock, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
+import { DateTimeViewWrapper } from '../internals/components/DateTimeViewWrapper';
+import { isInternalTimeView } from '../internals/utils/time-utils';
+import { isDatePickerView } from '../internals/utils/date-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const renderDesktopDateTimeView = ({
+  view,
+  onViewChange,
+  views,
+  focusedView,
+  onFocusedViewChange,
+  value,
+  defaultValue,
+  onChange,
+  className,
+  classes,
+  disableFuture,
+  disablePast,
+  minDate,
+  minTime,
+  maxDate,
+  maxTime,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  shouldDisableTime,
+  shouldDisableClock,
+  reduceAnimations,
+  minutesStep,
+  ampm,
+  onMonthChange,
+  monthsPerRow,
+  onYearChange,
+  yearsPerRow,
+  defaultCalendarMonth,
+  components,
+  componentsProps,
+  slots,
+  slotProps,
+  loading,
+  renderLoading,
+  disableHighlightToday,
+  readOnly,
+  disabled,
+  showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter,
+  sx,
+  autoFocus,
+  fixedWeekNumber,
+  displayWeekNumber,
+  disableIgnoringDatePartForTimeValidation,
+  timeSteps,
+  skipDisabled,
+  timeViewsCount
+}) => {
+  const isActionBarVisible = !!resolveComponentProps(slotProps?.actionBar ?? componentsProps?.actionBar, {})?.actions?.length;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(DateTimeViewWrapper, {
+      children: [/*#__PURE__*/_jsx(DateCalendar, {
+        view: isDatePickerView(view) ? view : 'day',
+        onViewChange: onViewChange,
+        views: views.filter(isDatePickerView),
+        focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+        onFocusedViewChange: onFocusedViewChange,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        className: className,
+        classes: classes,
+        disableFuture: disableFuture,
+        disablePast: disablePast,
+        minDate: minDate,
+        maxDate: maxDate,
+        shouldDisableDate: shouldDisableDate,
+        shouldDisableMonth: shouldDisableMonth,
+        shouldDisableYear: shouldDisableYear,
+        reduceAnimations: reduceAnimations,
+        onMonthChange: onMonthChange,
+        monthsPerRow: monthsPerRow,
+        onYearChange: onYearChange,
+        yearsPerRow: yearsPerRow,
+        defaultCalendarMonth: defaultCalendarMonth,
+        components: components,
+        componentsProps: componentsProps,
+        slots: slots,
+        slotProps: slotProps,
+        loading: loading,
+        renderLoading: renderLoading,
+        disableHighlightToday: disableHighlightToday,
+        readOnly: readOnly,
+        disabled: disabled,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+        dayOfWeekFormatter: dayOfWeekFormatter,
+        sx: sx,
+        autoFocus: autoFocus,
+        fixedWeekNumber: fixedWeekNumber,
+        displayWeekNumber: displayWeekNumber
+      }), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Divider, {
+          orientation: "vertical"
+        }), /*#__PURE__*/_jsx(MultiSectionDigitalClock, {
+          view: isInternalTimeView(view) ? view : 'hours',
+          onViewChange: onViewChange,
+          focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
+          onFocusedViewChange: onFocusedViewChange,
+          views: views.filter(isInternalTimeView),
+          value: value,
+          defaultValue: defaultValue,
+          onChange: onChange,
+          className: className,
+          classes: classes,
+          disableFuture: disableFuture,
+          disablePast: disablePast,
+          minTime: minTime,
+          maxTime: maxTime,
+          shouldDisableTime: shouldDisableTime,
+          shouldDisableClock: shouldDisableClock,
+          minutesStep: minutesStep,
+          ampm: ampm,
+          components: components,
+          componentsProps: componentsProps,
+          slots: slots,
+          slotProps: slotProps,
+          readOnly: readOnly,
+          disabled: disabled,
+          sx: _extends({
+            borderBottom: 0,
+            width: 'auto',
+            [`.${multiSectionDigitalClockSectionClasses.root}`]: {
+              maxHeight: '100%'
+            }
+          }, Array.isArray(sx) ? sx : [sx]),
+          autoFocus: autoFocus,
+          disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+          timeSteps: timeSteps,
+          skipDisabled: skipDisabled
+        })]
+      })]
+    }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};

package/modern/dateTimeViewRenderers/index.js

@@ -0,0 +1 @@
+export { renderDesktopDateTimeView } from './dateTimeViewRenderers';

package/modern/dateViewRenderers/dateViewRenderers.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DateCalendar } from '../DateCalendar';
+import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const isDatePickerView = view => view === 'year' || view === 'month' || view === 'day';
 export const renderDateViewCalendar = ({
   view,
   onViewChange,
@@ -45,7 +45,7 @@ export const renderDateViewCalendar = ({
   view: view,
   onViewChange: onViewChange,
   views: views.filter(isDatePickerView),
-  focusedView: focusedView,
+  focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
   onFocusedViewChange: onFocusedViewChange,
   value: value,
   defaultValue: defaultValue,

package/modern/{internals/components/icons → icons}/index.js

@@ -6,35 +6,35 @@ import * as React from 'react';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ArrowDropDown = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowLeft = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
 }), 'ArrowLeft');
 
 /**
  * @ignore - internal component.
  */
-export const ArrowRight = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const ArrowRightIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
 }), 'ArrowRight');
 
 /**
  * @ignore - internal component.
  */
-export const Calendar = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const CalendarIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
 }), 'Calendar');
 
 /**
  * @ignore - internal component.
  */
-export const Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export const ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -45,14 +45,14 @@ export const Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export const DateRange = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export const DateRangeIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
 }), 'DateRange');
 
 /**
  * @ignore - internal component.
  */
-export const Time = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export const TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.5.0
+ * @mui/x-date-pickers v6.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,4 +47,5 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
-export * from './models';
+export * from './models';
+export * from './icons';

package/modern/internals/components/DateTimeViewWrapper/DateTimeViewWrapper.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+export const DateTimeViewWrapper = styled('div')({
+  display: 'flex',
+  margin: '0 auto'
+});

package/modern/internals/components/DateTimeViewWrapper/index.js

@@ -0,0 +1 @@
+export { DateTimeViewWrapper } from './DateTimeViewWrapper';

package/modern/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -10,7 +10,7 @@ import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
-import { ArrowLeft, ArrowRight } from '../icons';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
 import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -121,7 +121,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     }),
     className: classes.button
   });
-  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeft;
+  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
@@ -132,7 +132,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       ownerState: undefined
     }),
     leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRight;
+  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRightIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,

package/modern/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant"];
+const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -38,7 +38,8 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
       selected,
       typographyClassName,
       value,
-      variant
+      variant,
+      width
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
@@ -46,7 +47,11 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
     variant: "text",
     ref: ref,
     className: clsx(className, classes.root)
-  }, other, {
+  }, width ? {
+    sx: {
+      width
+    }
+  } : {}, other, {
     children: /*#__PURE__*/_jsx(PickersToolbarText, {
       align: align,
       className: typographyClassName,

package/modern/internals/constants/dimensions.js

@@ -2,4 +2,5 @@ export const DAY_SIZE = 36;
 export const DAY_MARGIN = 2;
 export const DIALOG_WIDTH = 320;
 export const VIEW_HEIGHT = 358;
-export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
+export const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/modern/internals/hooks/useField/useField.js

@@ -158,7 +158,7 @@ export const useField = params => {
       return;
     }
     let keyPressed;
-    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1) {
+    if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
       const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
@@ -181,7 +181,7 @@ export const useField = params => {
 
       // The active section being selected, the browser has replaced its value with the key pressed by the user.
       const activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
-      keyPressed = cleanValueStr.slice(activeSection.start, activeSectionEndRelativeToNewValue);
+      keyPressed = cleanValueStr.slice(activeSection.start + cleanString(activeSection.startSeparator || '').length, activeSectionEndRelativeToNewValue);
     }
     if (isAndroid() && keyPressed.length === 0) {
       setTempAndroidValueStr(valueStr);
@@ -297,7 +297,12 @@ export const useField = params => {
     if (selectionStart !== inputRef.current.selectionStart || selectionEnd !== inputRef.current.selectionEnd) {
       // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
       const currentScrollTop = inputRef.current.scrollTop;
-      inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      // On multi input range pickers we want to update selection range only for the active input
+      // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+      // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
+      if (inputRef.current && inputRef.current === getActiveElement(document)) {
+        inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      }
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
       inputRef.current.scrollTop = currentScrollTop;
     }

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

@@ -4,6 +4,7 @@ import useControlled from '@mui/utils/useControlled';
 import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
 import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySectionIfPossible, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
+import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export const useFieldState = params => {
   const utils = useUtils();
   const localeText = useLocaleText();
@@ -19,6 +20,7 @@ export const useFieldState = params => {
     internalProps: {
       value: valueProp,
       defaultValue,
+      referenceDate: referenceDateProp,
       onChange,
       format,
       formatDensity = 'dense',
@@ -35,12 +37,24 @@ export const useFieldState = params => {
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
-    return {
+    const stateWithoutReferenceDate = {
       sections,
       value: valueFromTheOutside,
-      referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, valueManager.getTodayValue(utils, valueType)),
+      referenceValue: valueManager.emptyValue,
       tempValueStrAndroid: null
     };
+    const granularity = getSectionTypeGranularity(sections);
+    const referenceValue = valueManager.getInitialReferenceValue({
+      referenceDate: referenceDateProp,
+      value: valueFromTheOutside,
+      valueType,
+      utils,
+      props: internalProps,
+      granularity
+    });
+    return _extends({}, stateWithoutReferenceDate, {
+      referenceValue
+    });
   });
   const [selectedSections, innerSetSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
@@ -240,7 +254,13 @@ export const useFieldState = params => {
     tempValueStrAndroid
   }));
   React.useEffect(() => {
+    let shouldUpdate = false;
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
+      shouldUpdate = true;
+    } else {
+      shouldUpdate = valueManager.getTimezone(utils, state.value) !== valueManager.getTimezone(utils, valueFromTheOutside);
+    }
+    if (shouldUpdate) {
       setState(prevState => _extends({}, prevState, {
         value: valueFromTheOutside,
         referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -82,15 +82,12 @@ export const usePickerViews = ({
     hasUIView: false,
     viewModeLookup: {}
   }), [disableOpenPicker, viewRenderers, views]);
-  const hasMultipleUITimeView = React.useMemo(() => {
-    const numberUITimeViews = views.reduce((acc, viewForReduce) => {
-      if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
-        return acc + 1;
-      }
-      return acc;
-    }, 0);
-    return numberUITimeViews > 1;
-  }, [viewRenderers, views]);
+  const timeViewsCount = React.useMemo(() => views.reduce((acc, viewForReduce) => {
+    if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
+      return acc + 1;
+    }
+    return acc;
+  }, 0), [viewRenderers, views]);
   const currentViewMode = viewModeLookup[view];
   const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI');
   const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
@@ -152,7 +149,8 @@ export const usePickerViews = ({
         onViewChange: setView,
         focusedView,
         onFocusedViewChange: setFocusedView,
-        showViewSwitcher: hasMultipleUITimeView
+        showViewSwitcher: timeViewsCount > 1,
+        timeViewsCount
       }));
     }
   };

package/modern/internals/hooks/useViews.js

@@ -51,15 +51,6 @@ export function useViews({
   const viewIndex = views.indexOf(view);
   const previousView = views[viewIndex - 1] ?? null;
   const nextView = views[viewIndex + 1] ?? null;
-  const handleChangeView = useEventCallback(newView => {
-    if (newView === view) {
-      return;
-    }
-    setView(newView);
-    if (onViewChange) {
-      onViewChange(newView);
-    }
-  });
   const handleFocusedViewChange = useEventCallback((viewToFocus, hasFocus) => {
     if (hasFocus) {
       // Focus event
@@ -72,6 +63,16 @@ export function useViews({
 
     onFocusedViewChange?.(viewToFocus, hasFocus);
   });
+  const handleChangeView = useEventCallback(newView => {
+    if (newView === view) {
+      return;
+    }
+    setView(newView);
+    handleFocusedViewChange(newView, true);
+    if (onViewChange) {
+      onViewChange(newView);
+    }
+  });
   const goToNextView = useEventCallback(() => {
     if (nextView) {
       handleChangeView(nextView);

package/modern/internals/index.js

@@ -15,8 +15,9 @@ export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
 export { useValidation } from './hooks/useValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate } from './utils/date-utils';
 export { splitFieldInternalAndForwardedProps } from './utils/fields';
+export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation/extractValidationProps';

package/modern/internals/utils/date-time-utils.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["views", "format"];
+import { resolveTimeFormat, isTimeView } from './time-utils';
+import { resolveDateFormat } from './date-utils';
+export const resolveDateTimeFormat = (utils, _ref) => {
+  let {
+      views,
+      format
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (format) {
+    return format;
+  }
+  const dateViews = [];
+  const timeViews = [];
+  views.forEach(view => {
+    if (isTimeView(view)) {
+      timeViews.push(view);
+    } else {
+      dateViews.push(view);
+    }
+  });
+  if (timeViews.length === 0) {
+    return resolveDateFormat(utils, _extends({
+      views: dateViews
+    }, other), false);
+  }
+  if (dateViews.length === 0) {
+    return resolveTimeFormat(utils, _extends({
+      views: timeViews
+    }, other));
+  }
+  const timeFormat = resolveTimeFormat(utils, _extends({
+    views: timeViews
+  }, other));
+  const dateFormat = resolveDateFormat(utils, _extends({
+    views: dateViews
+  }, other), false);
+  return `${dateFormat} ${timeFormat}`;
+};

package/modern/internals/utils/date-utils.js

@@ -1,3 +1,4 @@
+import { areViewsEqual } from './views';
 export const findClosestEnabledDate = ({
   date,
   disableFuture,
@@ -85,4 +86,38 @@ export const mergeDateAndTime = (utils, dateParam, timeParam) => {
   mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
   mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
   return mergedDate;
+};
+export const getTodayDate = (utils, valueType) => valueType === 'date' ? utils.startOfDay(utils.date()) : utils.date();
+const dateViews = ['year', 'month', 'day'];
+export const isDatePickerView = view => dateViews.includes(view);
+export const resolveDateFormat = (utils, {
+  format,
+  views
+}, isInToolbar) => {
+  if (format != null) {
+    return format;
+  }
+  const formats = utils.formats;
+  if (areViewsEqual(views, ['year'])) {
+    return formats.year;
+  }
+  if (areViewsEqual(views, ['month'])) {
+    return formats.month;
+  }
+  if (areViewsEqual(views, ['day'])) {
+    return formats.dayOfMonth;
+  }
+  if (areViewsEqual(views, ['month', 'year'])) {
+    return `${formats.month} ${formats.year}`;
+  }
+  if (areViewsEqual(views, ['day', 'month'])) {
+    return `${formats.month} ${formats.dayOfMonth}`;
+  }
+  if (isInToolbar) {
+    // 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()) ? formats.normalDateWithWeekday : formats.normalDate;
+  }
+  return formats.keyboardDate;
 };

package/modern/internals/utils/fields.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from './validation/extractValidationProps';
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'format', 'formatDensity', 'onChange', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'readOnly', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef'];
 export const splitFieldInternalAndForwardedProps = (props, valueType) => {
   const forwardedProps = _extends({}, props);
   const internalProps = {};

package/modern/internals/utils/getDefaultReferenceDate.js

@@ -0,0 +1,58 @@
+import { createIsAfterIgnoreDatePart } from './time-utils';
+import { mergeDateAndTime, getTodayDate } from './date-utils';
+const SECTION_TYPE_GRANULARITY = {
+  year: 1,
+  month: 2,
+  day: 3,
+  hours: 4,
+  minutes: 5,
+  seconds: 6,
+  milliseconds: 7
+};
+export const getSectionTypeGranularity = sections => Math.max(...sections.map(section => SECTION_TYPE_GRANULARITY[section.type] ?? 1));
+const roundDate = (utils, granularity, date) => {
+  if (granularity === SECTION_TYPE_GRANULARITY.year) {
+    return utils.startOfYear(date);
+  }
+  if (granularity === SECTION_TYPE_GRANULARITY.month) {
+    return utils.startOfMonth(date);
+  }
+  if (granularity === SECTION_TYPE_GRANULARITY.day) {
+    return utils.startOfDay(date);
+  }
+
+  // We don't have startOfHour / startOfMinute / startOfSecond
+  let roundedDate = date;
+  if (granularity < SECTION_TYPE_GRANULARITY.minutes) {
+    roundedDate = utils.setMinutes(roundedDate, 0);
+  }
+  if (granularity < SECTION_TYPE_GRANULARITY.seconds) {
+    roundedDate = utils.setSeconds(roundedDate, 0);
+  }
+  if (granularity < SECTION_TYPE_GRANULARITY.milliseconds) {
+    roundedDate = utils.setMilliseconds(roundedDate, 0);
+  }
+  return roundedDate;
+};
+export const getDefaultReferenceDate = ({
+  props,
+  utils,
+  valueType,
+  granularity
+}) => {
+  let referenceDate = roundDate(utils, granularity, getTodayDate(utils, valueType));
+  if (props.minDate != null && utils.isAfterDay(props.minDate, referenceDate)) {
+    referenceDate = roundDate(utils, granularity, props.minDate);
+  }
+  if (props.maxDate != null && utils.isBeforeDay(props.maxDate, referenceDate)) {
+    referenceDate = roundDate(utils, granularity, props.maxDate);
+  }
+  const isAfter = createIsAfterIgnoreDatePart(props.disableIgnoringDatePartForTimeValidation ?? false, utils);
+  if (props.minTime != null && isAfter(props.minTime, referenceDate)) {
+    referenceDate = roundDate(utils, granularity, props.disableIgnoringDatePartForTimeValidation ? props.minTime : mergeDateAndTime(utils, referenceDate, props.minTime));
+  }
+  if (props.maxTime != null && isAfter(referenceDate, props.maxTime)) {
+    referenceDate = roundDate(utils, granularity, props.disableIgnoringDatePartForTimeValidation ? props.maxTime : mergeDateAndTime(utils, referenceDate, props.maxTime));
+  }
+  return referenceDate;
+};