@mui/x-date-pickers 6.7.0 → 6.9.0

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,29 +1,31 @@
 import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionWithoutPosition, FieldSectionValueBoundaries } from './useField.types';
-import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType } from '../../../models';
+import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone } from '../../../models';
 import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPickersAdapter<TDate, any>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'> & {
     maxLength: number | undefined;
 };
-export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate, any>, format: string) => string[];
-export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate, any>, sectionType: FieldSectionType, format: string) => string[];
+export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, format: string) => string[];
+export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
 export declare const cleanLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
-export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null) => string;
+export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
+export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null, stepsAttribues?: {
+    minutesStep?: number;
+}) => string;
 export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input') => string;
 export declare const cleanString: (dirtyString: string) => string;
 export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], isRTL: boolean) => TSection[];
 export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, currentFormat: string, newFormat: string) => string;
-export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
-export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
+export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
+export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
-export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[]) => TDate | null;
+export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[]) => NonNullable<TDate>;
 export declare const createDateStrForInputFromSections: (sections: FieldSection[], isRTL: boolean) => string;
-export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate, any>) => FieldSectionsValueBoundaries<TDate>;
+export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
-export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
+export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;
-export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
+export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
 export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;

package/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 != null && 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/internals/hooks/useField/useFieldCharacterEditing.d.ts

@@ -1,4 +1,4 @@
-import { FieldSection } from '../../../models';
+import { FieldSection, PickersTimezone } from '../../../models';
 import { FieldSectionsValueBoundaries } from './useField.types';
 import { UpdateSectionValueParams } from './useFieldState';
 interface ApplyCharacterEditingParams {
@@ -10,6 +10,7 @@ interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
     updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
     sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
     setTempAndroidValueStr: (newValue: string | null) => void;
+    timezone: PickersTimezone;
 }
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
@@ -18,7 +19,7 @@ interface UseFieldEditingParams<TDate, TSection extends FieldSection> {
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export declare const useFieldCharacterEditing: <TDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, setTempAndroidValueStr, }: UseFieldEditingParams<TDate, TSection>) => {
+export declare const useFieldCharacterEditing: <TDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, setTempAndroidValueStr, timezone, }: UseFieldEditingParams<TDate, TSection>) => {
     applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
     resetCharacterQuery: () => void;
 };

package/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);
@@ -110,7 +111,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);
       }
@@ -183,7 +184,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
@@ -197,7 +198,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',
@@ -222,7 +223,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/internals/hooks/useField/useFieldState.d.ts

@@ -25,4 +25,5 @@ export declare const useFieldState: <TValue, TDate, TSection extends FieldSectio
     setTempAndroidValueStr: (tempValueStrAndroid: string | null) => void;
     sectionsValueBoundaries: import("./useField.types").FieldSectionsValueBoundaries<TDate>;
     placeholder: string;
+    timezone: string;
 };

package/internals/hooks/useField/useFieldState.js

@@ -4,9 +4,9 @@ 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 => {
-  var _ref;
   const utils = useUtils();
   const localeText = useLocaleText();
   const adapter = useLocalizationContext();
@@ -27,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 = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : 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);
@@ -48,10 +58,10 @@ export const useFieldState = params => {
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
       value: valueFromTheOutside,
-      valueType,
       utils,
       props: internalProps,
-      granularity
+      granularity,
+      timezone
     });
     return _extends({}, stateWithoutReferenceDate, {
       referenceValue
@@ -107,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];
@@ -169,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);
@@ -209,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);
@@ -224,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 {
@@ -288,6 +297,7 @@ export const useFieldState = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
-    placeholder
+    placeholder,
+    timezone
   };
 };

package/internals/hooks/useMobilePicker/useMobilePicker.js

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