@mui/x-date-pickers 6.8.0 → 6.9.0

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

@@ -32,9 +32,9 @@ const getDeltaFromKeyCode = keyCode => {
       return 0;
   }
 };
-export const getDaysInWeekStr = (utils, format) => {
+export const getDaysInWeekStr = (utils, timezone, format) => {
   const elements = [];
-  const now = utils.date();
+  const now = utils.dateWithTimezone(undefined, timezone);
   const startDate = utils.startOfWeek(now);
   const endDate = utils.endOfWeek(now);
   let current = startDate;
@@ -44,19 +44,19 @@ export const getDaysInWeekStr = (utils, format) => {
   }
   return elements.map(weekDay => utils.formatByString(weekDay, format));
 };
-export const getLetterEditingOptions = (utils, sectionType, format) => {
+export const getLetterEditingOptions = (utils, timezone, sectionType, format) => {
   switch (sectionType) {
     case 'month':
       {
-        return getMonthsInYear(utils, utils.date()).map(month => utils.formatByString(month, format));
+        return getMonthsInYear(utils, utils.dateWithTimezone(undefined, timezone)).map(month => utils.formatByString(month, format));
       }
     case 'weekDay':
       {
-        return getDaysInWeekStr(utils, format);
+        return getDaysInWeekStr(utils, timezone, format);
       }
     case 'meridiem':
       {
-        const now = utils.date();
+        const now = utils.dateWithTimezone(undefined, timezone);
         return [utils.startOfDay(now), utils.endOfDay(now)].map(date => utils.formatByString(date, format));
       }
     default:
@@ -77,7 +77,7 @@ export const cleanLeadingZeros = (utils, valueStr, size) => {
   }
   return cleanValueStr;
 };
-export const cleanDigitSectionValue = (utils, value, sectionBoundaries, section) => {
+export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries, section) => {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
       throw new Error([`MUI: The token "${section.format}" is a digit format with letter in it.'
@@ -96,7 +96,7 @@ export const cleanDigitSectionValue = (utils, value, sectionBoundaries, section)
   }
   return valueStr;
 };
-export const adjustSectionValue = (utils, section, keyCode, sectionsValueBoundaries, activeDate) => {
+export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttribues) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -107,28 +107,39 @@ export const adjustSectionValue = (utils, section, keyCode, sectionsValueBoundar
       format: section.format,
       contentType: section.contentType
     });
-    const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, section);
+    const getCleanValue = value => cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section);
+    const step = section.type === 'minutes' && stepsAttribues?.minutesStep ? stepsAttribues.minutesStep : 1;
+    const currentSectionValue = parseInt(section.value, 10);
+    let newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
-        return utils.formatByString(utils.date(), section.format);
+        return utils.formatByString(utils.dateWithTimezone(undefined, timezone), section.format);
       }
       if (delta > 0 || isStart) {
-        return getCleanValue(sectionBoundaries.minimum);
+        newSectionValueNumber = sectionBoundaries.minimum;
+      } else {
+        newSectionValueNumber = sectionBoundaries.maximum;
+      }
+    }
+    if (newSectionValueNumber % step !== 0) {
+      if (delta < 0 || isStart) {
+        newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
+      }
+
+      if (delta > 0 || isEnd) {
+        newSectionValueNumber -= newSectionValueNumber % step;
       }
-      return getCleanValue(sectionBoundaries.maximum);
     }
-    const currentSectionValue = parseInt(section.value, 10);
-    const newSectionValueNumber = currentSectionValue + delta;
     if (newSectionValueNumber > sectionBoundaries.maximum) {
-      return getCleanValue(sectionBoundaries.minimum);
+      return getCleanValue(sectionBoundaries.minimum + (newSectionValueNumber - sectionBoundaries.maximum - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
     }
     if (newSectionValueNumber < sectionBoundaries.minimum) {
-      return getCleanValue(sectionBoundaries.maximum);
+      return getCleanValue(sectionBoundaries.maximum - (sectionBoundaries.minimum - newSectionValueNumber - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
     }
     return getCleanValue(newSectionValueNumber);
   };
   const adjustLetterSection = () => {
-    const options = getLetterEditingOptions(utils, section.type, section.format);
+    const options = getLetterEditingOptions(utils, timezone, section.type, section.format);
     if (options.length === 0) {
       return section.value;
     }
@@ -196,12 +207,12 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
   }
   return newSections;
 };
-const getSectionPlaceholder = (utils, localeText, sectionConfig, currentTokenValue) => {
+const getSectionPlaceholder = (utils, timezone, localeText, sectionConfig, currentTokenValue) => {
   switch (sectionConfig.type) {
     case 'year':
       {
         return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(), currentTokenValue).length
+          digitAmount: utils.formatByString(utils.dateWithTimezone(undefined, timezone), currentTokenValue).length
         });
       }
     case 'month':
@@ -250,45 +261,46 @@ export const changeSectionValueFormat = (utils, valueStr, currentFormat, newForm
   }
   return utils.formatByString(utils.parse(valueStr, currentFormat), newFormat);
 };
-const isFourDigitYearFormat = (utils, format) => utils.formatByString(utils.date(), format).length === 4;
-export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, format) => {
+const isFourDigitYearFormat = (utils, timezone, format) => utils.formatByString(utils.dateWithTimezone(undefined, timezone), format).length === 4;
+export const doesSectionFormatHaveLeadingZeros = (utils, timezone, contentType, sectionType, format) => {
   if (contentType !== 'digit') {
     return false;
   }
+  const now = utils.dateWithTimezone(undefined, timezone);
   switch (sectionType) {
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
       {
-        if (isFourDigitYearFormat(utils, format)) {
-          const formatted0001 = utils.formatByString(utils.setYear(utils.date(), 1), format);
+        if (isFourDigitYearFormat(utils, timezone, format)) {
+          const formatted0001 = utils.formatByString(utils.setYear(now, 1), format);
           return formatted0001 === '0001';
         }
-        const formatted2001 = utils.formatByString(utils.setYear(utils.date(), 2001), format);
+        const formatted2001 = utils.formatByString(utils.setYear(now, 2001), format);
         return formatted2001 === '01';
       }
     case 'month':
       {
-        return utils.formatByString(utils.startOfYear(utils.date()), format).length > 1;
+        return utils.formatByString(utils.startOfYear(now), format).length > 1;
       }
     case 'day':
       {
-        return utils.formatByString(utils.startOfMonth(utils.date()), format).length > 1;
+        return utils.formatByString(utils.startOfMonth(now), format).length > 1;
       }
     case 'weekDay':
       {
-        return utils.formatByString(utils.startOfWeek(utils.date()), format).length > 1;
+        return utils.formatByString(utils.startOfWeek(now), format).length > 1;
       }
     case 'hours':
       {
-        return utils.formatByString(utils.setHours(utils.date(), 1), format).length > 1;
+        return utils.formatByString(utils.setHours(now, 1), format).length > 1;
       }
     case 'minutes':
       {
-        return utils.formatByString(utils.setMinutes(utils.date(), 1), format).length > 1;
+        return utils.formatByString(utils.setMinutes(now, 1), format).length > 1;
       }
     case 'seconds':
       {
-        return utils.formatByString(utils.setMinutes(utils.date(), 1), format).length > 1;
+        return utils.formatByString(utils.setMinutes(now, 1), format).length > 1;
       }
     default:
       {
@@ -313,7 +325,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
+export const splitFormatIntoSections = (utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -322,7 +334,7 @@ export const splitFormatIntoSections = (utils, localeText, format, date, formatD
       return null;
     }
     const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-    const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
+    const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, sectionConfig.contentType, sectionConfig.type, token);
     const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
     const isValidDate = date != null && utils.isValid(date);
     let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
@@ -344,7 +356,7 @@ export const splitFormatIntoSections = (utils, localeText, format, date, formatD
       format: token,
       maxLength,
       value: sectionValue,
-      placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
+      placeholder: getSectionPlaceholder(utils, timezone, localeText, sectionConfig, token),
       hasLeadingZeros: hasLeadingZerosInFormat,
       hasLeadingZerosInFormat,
       hasLeadingZerosInInput,
@@ -455,8 +467,8 @@ export const createDateStrForInputFromSections = (sections, isRTL) => {
   // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
   return `\u2066${dateStr}\u2069`;
 };
-export const getSectionsBoundaries = utils => {
-  const today = utils.date();
+export const getSectionsBoundaries = (utils, timezone) => {
+  const today = utils.dateWithTimezone(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const {
     maxDaysInMonth,
@@ -479,7 +491,7 @@ export const getSectionsBoundaries = utils => {
       format
     }) => ({
       minimum: 0,
-      maximum: isFourDigitYearFormat(utils, format) ? 9999 : 99
+      maximum: isFourDigitYearFormat(utils, timezone, format) ? 9999 : 99
     }),
     month: () => ({
       minimum: 1,
@@ -498,7 +510,7 @@ export const getSectionsBoundaries = utils => {
       contentType
     }) => {
       if (contentType === 'digit') {
-        const daysInWeek = getDaysInWeekStr(utils, format).map(Number);
+        const daysInWeek = getDaysInWeekStr(utils, timezone, format).map(Number);
         return {
           minimum: Math.min(...daysInWeek),
           maximum: Math.max(...daysInWeek)
@@ -560,7 +572,7 @@ export const validateSections = (sections, valueType) => {
     }
   }
 };
-const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTransferTo) => {
+const transferDateSectionValue = (utils, timezone, section, dateToTransferFrom, dateToTransferTo) => {
   switch (section.type) {
     case 'year':
       {
@@ -572,7 +584,7 @@ const transferDateSectionValue = (utils, section, dateToTransferFrom, dateToTran
       }
     case 'weekDay':
       {
-        const formattedDaysInWeek = getDaysInWeekStr(utils, section.format);
+        const formattedDaysInWeek = getDaysInWeekStr(utils, timezone, section.format);
         const dayInWeekStrOfActiveDate = utils.formatByString(dateToTransferFrom, section.format);
         const dayInWeekOfActiveDate = formattedDaysInWeek.indexOf(dayInWeekStrOfActiveDate);
         const dayInWeekOfNewSectionValue = formattedDaysInWeek.indexOf(section.value);
@@ -623,16 +635,16 @@ const reliableSectionModificationOrder = {
   seconds: 7,
   meridiem: 8
 };
-export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
+export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it
 [...sections].sort((a, b) => reliableSectionModificationOrder[a.type] - reliableSectionModificationOrder[b.type]).reduce((mergedDate, section) => {
   if (!shouldLimitToEditedSections || section.modified) {
-    return transferDateSectionValue(utils, section, dateToTransferFrom, mergedDate);
+    return transferDateSectionValue(utils, timezone, section, dateToTransferFrom, mergedDate);
   }
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
-export const clampDaySectionIfPossible = (utils, sections, sectionsValueBoundaries) => {
+export const clampDaySectionIfPossible = (utils, timezone, sections, sectionsValueBoundaries) => {
   // We can only clamp the day value if:
   // 1. if all the sections are filled (except the week day section which can be empty)
   // 2. there is a day section
@@ -652,7 +664,7 @@ export const clampDaySectionIfPossible = (utils, sections, sectionsValueBoundari
       contentType: section.contentType
     });
     return _extends({}, section, {
-      value: cleanDigitSectionValue(utils, dayBoundaries.minimum, dayBoundaries, section)
+      value: cleanDigitSectionValue(utils, timezone, dayBoundaries.minimum, dayBoundaries, section)
     });
   });
   const startOfMonth = getDateFromDateSections(utils, sectionsForStartOfMonth);

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

@@ -40,7 +40,8 @@ export const useFieldCharacterEditing = ({
   sections,
   updateSectionValue,
   sectionsValueBoundaries,
-  setTempAndroidValueStr
+  setTempAndroidValueStr,
+  timezone
 }) => {
   const utils = useUtils();
   const [query, setQuery] = React.useState(null);
@@ -109,7 +110,7 @@ export const useFieldCharacterEditing = ({
       };
     };
     const testQueryOnFormatAndFallbackFormat = (queryValue, activeSection, fallbackFormat, formatFallbackValue) => {
-      const getOptions = format => getLetterEditingOptions(utils, activeSection.type, format);
+      const getOptions = format => getLetterEditingOptions(utils, timezone, activeSection.type, format);
       if (activeSection.contentType === 'letter') {
         return findMatchingOptions(activeSection.format, getOptions(activeSection.format), queryValue);
       }
@@ -182,7 +183,7 @@ export const useFieldCharacterEditing = ({
         };
       }
       const shouldGoToNextSection = Number(`${queryValue}0`) > sectionBoundaries.maximum || queryValue.length === sectionBoundaries.maximum.toString().length;
-      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, section);
+      const newSectionValue = cleanDigitSectionValue(utils, timezone, queryValueNumber, sectionBoundaries, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -196,7 +197,7 @@ export const useFieldCharacterEditing = ({
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
-        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
+        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, timezone, 'digit', 'month', 'MM');
         const response = getNewSectionValue(queryValue, {
           type: activeSection.type,
           format: 'MM',
@@ -221,7 +222,7 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
+        const formattedValue = getDaysInWeekStr(utils, timezone, activeSection.format)[Number(response.sectionValue) - 1];
         return _extends({}, response, {
           sectionValue: formattedValue
         });

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 { useValueWithTimezone } from '../useValueWithTimezone';
 import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export const useFieldState = params => {
   const utils = useUtils();
@@ -26,13 +27,23 @@ export const useFieldState = params => {
       formatDensity = 'dense',
       selectedSections: selectedSectionsProp,
       onSelectedSectionsChange,
-      shouldRespectLeadingZeros = false
+      shouldRespectLeadingZeros = false,
+      timezone: timezoneProp
     }
   } = params;
-  const firstDefaultValue = React.useRef(defaultValue);
-  const valueFromTheOutside = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
-  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity]);
+  const {
+    timezone,
+    value: valueFromTheOutside,
+    handleValueChange
+  } = useValueWithTimezone({
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager
+  });
+  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, timezone), [utils, timezone]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL)), [fieldValueManager, format, localeText, isRTL, shouldRespectLeadingZeros, utils, formatDensity, timezone]);
   const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
@@ -49,7 +60,8 @@ export const useFieldState = params => {
       value: valueFromTheOutside,
       utils,
       props: internalProps,
-      granularity
+      granularity,
+      timezone
     });
     return _extends({}, stateWithoutReferenceDate, {
       referenceValue
@@ -105,18 +117,17 @@ export const useFieldState = params => {
       referenceValue,
       tempValueStrAndroid: null
     }));
-    if (onChange) {
-      const context = {
-        validationError: validator({
-          adapter,
+    const context = {
+      validationError: validator({
+        adapter,
+        value,
+        props: _extends({}, internalProps, {
           value,
-          props: _extends({}, internalProps, {
-            value
-          })
+          timezone
         })
-      };
-      onChange(value, context);
-    }
+      })
+    };
+    handleValueChange(value, context);
   };
   const setSectionValue = (sectionIndex, newSectionValue) => {
     const newSections = [...state.sections];
@@ -167,8 +178,8 @@ export const useFieldState = params => {
       if (date == null || !utils.isValid(date)) {
         return null;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
-      return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
+      const sections = splitFormatIntoSections(utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL);
+      return mergeDateIntoReferenceDate(utils, timezone, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
     const newReferenceValue = fieldValueManager.updateReferenceValue(utils, newValue, state.referenceValue);
@@ -207,7 +218,7 @@ export const useFieldState = params => {
      * This can be useful if the month has fewer days than the day value currently provided.
      */
     if (!utils.isValid(newActiveDate)) {
-      const clampedSections = clampDaySectionIfPossible(utils, newActiveDateSections, sectionsValueBoundaries);
+      const clampedSections = clampDaySectionIfPossible(utils, timezone, newActiveDateSections, sectionsValueBoundaries);
       if (clampedSections != null) {
         shouldRegenSections = true;
         newActiveDate = getDateFromDateSections(utils, clampedSections);
@@ -222,7 +233,7 @@ export const useFieldState = params => {
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
     if (newActiveDate != null && utils.isValid(newActiveDate)) {
-      const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
+      const mergedDate = mergeDateIntoReferenceDate(utils, timezone, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
       values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
       shouldPublish = true;
     } else {
@@ -286,6 +297,7 @@ export const useFieldState = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
-    placeholder
+    placeholder,
+    timezone
   };
 };

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -32,6 +32,7 @@ export const useMobilePicker = _ref => {
     sx,
     format,
     formatDensity,
+    timezone,
     label,
     inputRef,
     readOnly,
@@ -71,6 +72,7 @@ export const useMobilePicker = _ref => {
       sx,
       format,
       formatDensity,
+      timezone,
       label
     }),
     ownerState: props

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

@@ -5,6 +5,8 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from '../useOpenState';
 import { useLocalizationContext, useUtils } from '../useUtils';
 import { useValidation } from '../useValidation';
+import { useValueWithTimezone } from '../useValueWithTimezone';
+
 /**
  * Decide if the new value should be published
  * The published value will be passed to `onChange` if defined.
@@ -122,7 +124,8 @@ export const usePickerValue = ({
     defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
     selectedSections: selectedSectionsProp,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp
   } = props;
   const {
     current: defaultValue
@@ -175,8 +178,19 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: false
     };
   });
+  const {
+    timezone,
+    handleValueChange
+  } = useValueWithTimezone({
+    timezone: timezoneProp,
+    value: inValue,
+    defaultValue,
+    onChange,
+    valueManager
+  });
   useValidation(_extends({}, props, {
-    value: dateState.draft
+    value: dateState.draft,
+    timezone
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
   const updateDate = useEventCallback(action => {
     const updaterParams = {
@@ -195,18 +209,19 @@ export const usePickerValue = ({
       lastCommittedValue: shouldCommit ? action.value : prev.lastCommittedValue,
       hasBeenModifiedSinceMount: true
     }));
-    if (shouldPublish && onChange) {
+    if (shouldPublish) {
       const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
         adapter,
         value: action.value,
         props: _extends({}, props, {
-          value: action.value
+          value: action.value,
+          timezone
         })
       });
       const context = {
         validationError
       };
-      onChange(action.value, context);
+      handleValueChange(action.value, context);
     }
     if (shouldCommit && onAccept) {
       onAccept(action.value);
@@ -256,7 +271,7 @@ export const usePickerValue = ({
   });
   const handleSetToday = useEventCallback(() => {
     updateDate({
-      value: valueManager.getTodayValue(utils, valueType),
+      value: valueManager.getTodayValue(utils, timezone, valueType),
       name: 'setValueFromAction',
       pickerAction: 'today'
     });
@@ -310,7 +325,8 @@ export const usePickerValue = ({
       adapter,
       value: testedValue,
       props: _extends({}, props, {
-        value: testedValue
+        value: testedValue,
+        timezone
       })
     });
     return !valueManager.hasError(error);

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

@@ -43,7 +43,8 @@ export const usePickerViews = ({
     openTo,
     onViewChange,
     disableOpenPicker,
-    viewRenderers
+    viewRenderers,
+    timezone
   } = props;
   const propsToForwardToView = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -95,11 +96,14 @@ export const usePickerViews = ({
     setPopperView(view);
   }
   useEnhancedEffect(() => {
+    // Handle case of `DateTimePicker` without time renderers
     if (currentViewMode === 'field' && open) {
       onClose();
-      onSelectedSectionsChange('hours');
       setTimeout(() => {
+        // focusing the input before the range selection is done
+        // calling `onSelectedSectionsChange` outside of timeout results in an inconsistent behavior between Safari And Chrome
         inputRef?.current.focus();
+        onSelectedSectionsChange(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -144,6 +148,7 @@ export const usePickerViews = ({
       }
       return renderer(_extends({}, propsToForwardToView, additionalViewProps, propsFromPickerValue, {
         views,
+        timezone,
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,

package/modern/internals/hooks/useUtils.js

@@ -18,8 +18,11 @@ export const useLocalizationContext = () => {
 export const useUtils = () => useLocalizationContext().utils;
 export const useDefaultDates = () => useLocalizationContext().defaultDates;
 export const useLocaleText = () => useLocalizationContext().localeText;
-export const useNow = () => {
+export const useNow = timezone => {
   const utils = useUtils();
-  const now = React.useRef(utils.date());
+  const now = React.useRef();
+  if (now.current === undefined) {
+    now.current = utils.dateWithTimezone(undefined, timezone);
+  }
   return now.current;
 };

package/modern/internals/hooks/useValueWithTimezone.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useControlled from '@mui/utils/useControlled';
+import { useUtils } from './useUtils';
+/**
+ * Hooks making sure that:
+ * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
+ * - The value rendered is always the one from `props.timezone` if defined
+ */
+export const useValueWithTimezone = ({
+  timezone: timezoneProp,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  valueManager
+}) => {
+  const utils = useUtils();
+  const firstDefaultValue = React.useRef(defaultValue);
+  const inputValue = valueProp ?? firstDefaultValue.current ?? valueManager.emptyValue;
+  const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, inputValue), [utils, valueManager, inputValue]);
+  const setInputTimezone = useEventCallback(newValue => {
+    if (inputTimezone == null) {
+      return newValue;
+    }
+    return valueManager.setTimezone(utils, inputTimezone, newValue);
+  });
+  const timezoneToRender = timezoneProp ?? inputTimezone ?? 'default';
+  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]);
+  const handleValueChange = useEventCallback((newValue, ...otherParams) => {
+    const newValueWithInputTimezone = setInputTimezone(newValue);
+    onChange?.(newValueWithInputTimezone, ...otherParams);
+  });
+  return {
+    value: valueWithTimezoneToRender,
+    handleValueChange,
+    timezone: timezoneToRender
+  };
+};
+
+/**
+ * Wrapper around `useControlled` and `useValueWithTimezone`
+ */
+export const useControlledValueWithTimezone = ({
+  name,
+  timezone: timezoneProp,
+  value: valueProp,
+  defaultValue,
+  onChange: onChangeProp,
+  valueManager
+}) => {
+  const [valueWithInputTimezone, setValue] = useControlled({
+    name,
+    state: 'value',
+    controlled: valueProp,
+    default: defaultValue ?? valueManager.emptyValue
+  });
+  const onChange = useEventCallback((newValue, ...otherParams) => {
+    setValue(newValue);
+    onChangeProp?.(newValue, ...otherParams);
+  });
+  return useValueWithTimezone({
+    timezone: timezoneProp,
+    value: valueWithInputTimezone,
+    defaultValue: undefined,
+    onChange,
+    valueManager
+  });
+};

package/modern/internals/index.js

@@ -9,6 +9,7 @@ export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/p
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
+export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';