@mui/x-date-pickers 7.0.0-alpha.8 → 7.0.0-beta.0

package/modern/PickersTextField/PickersTextField.js

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+import { PickersOutlinedInput } from './PickersOutlinedInput';
+import { PickersFilledInput } from './PickersFilledInput';
+import { PickersInput } from './PickersInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const VARIANT_COMPONENT = {
+  standard: PickersInput,
+  filled: PickersFilledInput,
+  outlined: PickersOutlinedInput
+};
+const PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    classes,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+  };
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+};
+const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersTextField'
+  });
+  const {
+      // Props used by FormControl
+      onFocus,
+      onBlur,
+      className,
+      color = 'primary',
+      disabled = false,
+      error = false,
+      variant = 'outlined',
+      required = false,
+      // Props used by PickersInput
+      InputProps,
+      inputProps,
+      inputRef,
+      sectionListRef,
+      elements,
+      areAllSectionsEmpty,
+      onClick,
+      onKeyDown,
+      onPaste,
+      onInput,
+      endAdornment,
+      startAdornment,
+      tabIndex,
+      contentEditable,
+      focused,
+      value,
+      onChange,
+      fullWidth,
+      id: idProp,
+      // Props used by FormHelperText
+      helperText,
+      FormHelperTextProps,
+      // Props used by InputLabel
+      label,
+      InputLabelProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const id = useId(idProp);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const ownerState = _extends({}, props, {
+    color,
+    disabled,
+    error,
+    focused,
+    required,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  const PickersInputComponent = VARIANT_COMPONENT[variant];
+  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: handleRootRef,
+    focused: focused,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    variant: variant,
+    error: error,
+    color: color,
+    fullWidth: fullWidth,
+    required: required,
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(InputLabel, _extends({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
+      elements: elements,
+      areAllSectionsEmpty: areAllSectionsEmpty,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onInput: onInput,
+      onPaste: onPaste,
+      endAdornment: endAdornment,
+      startAdornment: startAdornment,
+      tabIndex: tabIndex,
+      contentEditable: contentEditable,
+      value: value,
+      onChange: onChange,
+      id: id,
+      fullWidth: fullWidth,
+      inputProps: inputProps,
+      inputRef: inputRef,
+      sectionListRef: sectionListRef,
+      label: label
+    }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PropTypes.arrayOf(PropTypes.shape({
+    after: PropTypes.object.isRequired,
+    before: PropTypes.object.isRequired,
+    container: PropTypes.object.isRequired,
+    content: PropTypes.object.isRequired
+  })).isRequired,
+  endAdornment: PropTypes.node,
+  error: PropTypes.bool.isRequired,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
+  FormHelperTextProps: PropTypes.object,
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
+  id: PropTypes.string,
+  InputLabelProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onInput: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  onPaste: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      getRoot: PropTypes.func.isRequired,
+      getSectionContainer: PropTypes.func.isRequired,
+      getSectionContent: PropTypes.func.isRequired,
+      getSectionIndexFromDOMElement: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['medium', 'small']),
+  startAdornment: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.string.isRequired,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+export { PickersTextField };

package/modern/PickersTextField/index.js

@@ -0,0 +1,6 @@
+export { PickersTextField } from './PickersTextField';
+export { pickersTextFieldClasses, getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+export * from './PickersInput';
+export * from './PickersFilledInput';
+export * from './PickersOutlinedInput';
+export * from './PickersInputBase';

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -59,9 +59,6 @@ StaticDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -79,9 +79,6 @@ StaticDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -71,9 +71,6 @@ StaticTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default value.

package/modern/TimeClock/TimeClock.js

@@ -218,7 +218,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         {
           const handleHoursChange = (hourValue, isFinish) => {
             const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
-            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish);
+            setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
           return {
             onChange: handleHoursChange,
@@ -238,7 +238,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         {
           const minutesValue = utils.getMinutes(valueOrReferenceDate);
           const handleMinutesChange = (minuteValue, isFinish) => {
-            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish);
+            setValueAndGoToNextView(utils.setMinutes(valueOrReferenceDate, minuteValue), isFinish, 'minutes');
           };
           return {
             viewValue: minutesValue,
@@ -257,7 +257,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
         {
           const secondsValue = utils.getSeconds(valueOrReferenceDate);
           const handleSecondsChange = (secondValue, isFinish) => {
-            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish);
+            setValueAndGoToNextView(utils.setSeconds(valueOrReferenceDate, secondValue), isFinish, 'seconds');
           };
           return {
             viewValue: secondsValue,

package/modern/TimePicker/TimePicker.js

@@ -65,9 +65,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/modern/TimePicker/TimePickerToolbar.js

@@ -214,9 +214,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
   classes: PropTypes.object,
-  /**
-   * className applied to the root component.
-   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   /**

package/modern/YearCalendar/YearCalendar.js

@@ -264,9 +264,6 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * className applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default selected value.

package/modern/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -138,23 +138,23 @@ export const renderDesktopDateTimeView = ({
           view: 'hours',
           views: ['hours'],
           focusedView: focusedView && isInternalTimeView(focusedView) ? 'hours' : null,
-          sx: _extends({
+          sx: [{
             width: 'auto',
             [`&.${digitalClockClasses.root}`]: {
               maxHeight: VIEW_HEIGHT
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         })) : renderMultiSectionDigitalClockTimeView(_extends({}, commonTimeProps, {
           view: isInternalTimeView(view) ? view : 'hours',
           views: views.filter(isInternalTimeView),
           focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
-          sx: _extends({
+          sx: [{
             borderBottom: 0,
             width: 'auto',
             [`.${multiSectionDigitalClockSectionClasses.root}`]: {
               maxHeight: '100%'
             }
-          }, Array.isArray(sx) ? sx : [sx])
+          }, ...(Array.isArray(sx) ? sx : [sx])]
         }))]
       })]
     }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.8
+ * @mui/x-date-pickers v7.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,7 +11,7 @@ export * from './DigitalClock';
 export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
-export * from './locales';
+export * from './locales/utils/pickersLocaleTextApi';
 
 // Fields
 export * from './DateField';
@@ -51,6 +51,7 @@ export * from './PickersShortcuts';
 export * from './PickersCalendarHeader';
 
 // Field utilities
+export * from './PickersTextField';
 export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';

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

@@ -24,6 +24,7 @@ export const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   } = useFieldState(params);
@@ -59,6 +60,7 @@ export const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
+    localizedDigits,
     setTempAndroidValueStr,
     timezone
   });
@@ -190,7 +192,7 @@ export const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
+      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -300,7 +302,7 @@ export const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
             minutesStep
           });
           updateSectionValue({
@@ -383,7 +385,7 @@ export const useField = params => {
     }
   }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
+  const valueStr = React.useMemo(() => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL), [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';

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

@@ -65,7 +65,54 @@ export const getLetterEditingOptions = (utils, timezone, sectionType, format) =>
       }
   }
 };
-export const cleanLeadingZeros = (utils, valueStr, size) => {
+
+// This format should be the same on all the adapters
+// If some adapter does not respect this convention, then we will need to hardcode the format on each adapter.
+export const FORMAT_SECONDS_NO_LEADING_ZEROS = 's';
+const NON_LOCALIZED_DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+export const getLocalizedDigits = utils => {
+  const today = utils.date(undefined);
+  const formattedZero = utils.formatByString(utils.setSeconds(today, 0), FORMAT_SECONDS_NO_LEADING_ZEROS);
+  if (formattedZero === '0') {
+    return NON_LOCALIZED_DIGITS;
+  }
+  return Array.from({
+    length: 10
+  }).map((_, index) => utils.formatByString(utils.setSeconds(today, index), FORMAT_SECONDS_NO_LEADING_ZEROS));
+};
+export const removeLocalizedDigits = (valueStr, localizedDigits) => {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  const digits = [];
+  let currentFormattedDigit = '';
+  for (let i = 0; i < valueStr.length; i += 1) {
+    currentFormattedDigit += valueStr[i];
+    const matchingDigitIndex = localizedDigits.indexOf(currentFormattedDigit);
+    if (matchingDigitIndex > -1) {
+      digits.push(matchingDigitIndex.toString());
+      currentFormattedDigit = '';
+    }
+  }
+  return digits.join('');
+};
+export const applyLocalizedDigits = (valueStr, localizedDigits) => {
+  if (localizedDigits[0] === '0') {
+    return valueStr;
+  }
+  return valueStr.split('').map(char => localizedDigits[Number(char)]).join('');
+};
+export const isStringNumber = (valueStr, localizedDigits) => {
+  const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
+  return !Number.isNaN(Number(nonLocalizedValueStr));
+};
+
+/**
+ * Remove the leading zeroes to a digit section value.
+ * E.g.: `03` => `3`
+ * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
+ */
+export const cleanLeadingZeros = (valueStr, size) => {
   let cleanValueStr = valueStr;
 
   // Remove the leading zeros
@@ -77,7 +124,7 @@ export const cleanLeadingZeros = (utils, valueStr, size) => {
   }
   return cleanValueStr;
 };
-export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries, section) => {
+export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
   if (process.env.NODE_ENV !== 'production') {
     if (section.type !== 'day' && section.contentType === 'digit-with-letter') {
       throw new Error([`MUI X: The token "${section.format}" is a digit format with letter in it.'
@@ -90,13 +137,13 @@ export const cleanDigitSectionValue = (utils, timezone, value, sectionBoundaries
   }
 
   // queryValue without leading `0` (`01` => `1`)
-  const valueStr = value.toString();
+  let valueStr = value.toString();
   if (section.hasLeadingZerosInInput) {
-    return cleanLeadingZeros(utils, valueStr, section.maxLength);
+    valueStr = cleanLeadingZeros(valueStr, section.maxLength);
   }
-  return valueStr;
+  return applyLocalizedDigits(valueStr, localizedDigits);
 };
-export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, activeDate, stepsAttributes) => {
+export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
@@ -107,9 +154,9 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
       format: section.format,
       contentType: section.contentType
     });
-    const getCleanValue = value => cleanDigitSectionValue(utils, timezone, value, sectionBoundaries, section);
+    const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
     const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
-    const currentSectionValue = parseInt(section.value, 10);
+    const currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
     let newSectionValueNumber = currentSectionValue + delta * step;
     if (shouldSetAbsolute) {
       if (section.type === 'year' && !isEnd && !isStart) {
@@ -157,11 +204,11 @@ export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsVa
   }
   return adjustLetterSection();
 };
-export const getSectionVisibleValue = (section, target) => {
+export const getSectionVisibleValue = (section, target, localizedDigits) => {
   let value = section.value || section.placeholder;
   const hasLeadingZeros = target === 'non-input' ? section.hasLeadingZerosInFormat : section.hasLeadingZerosInInput;
   if (target === 'non-input' && section.hasLeadingZerosInInput && !section.hasLeadingZerosInFormat) {
-    value = Number(value).toString();
+    value = Number(removeLocalizedDigits(value, localizedDigits)).toString();
   }
 
   // In the input, we add an empty character at the end of each section without leading zeros.
@@ -179,13 +226,13 @@ export const getSectionVisibleValue = (section, target) => {
   return value;
 };
 export const cleanString = dirtyString => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
-export const addPositionPropertiesToSections = (sections, isRTL) => {
+export const addPositionPropertiesToSections = (sections, localizedDigits, isRTL) => {
   let position = 0;
   let positionInInput = isRTL ? 1 : 0;
   const newSections = [];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
+    const renderedValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     const sectionStr = `${section.startSeparator}${renderedValue}${section.endSeparator}`;
     const sectionLength = cleanString(sectionStr).length;
     const sectionLengthInInput = sectionStr.length;
@@ -337,7 +384,7 @@ const getEscapedPartsFromFormat = (utils, format) => {
   }
   return escapedParts;
 };
-export const splitFormatIntoSections = (utils, timezone, localeText, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
+export const splitFormatIntoSections = (utils, timezone, localeText, localizedDigits, format, date, formatDensity, shouldRespectLeadingZeros, isRTL) => {
   let startSeparator = '';
   const sections = [];
   const now = utils.date();
@@ -360,7 +407,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
         }
         maxLength = sectionConfig.maxLength;
         if (isValidDate) {
-          sectionValue = cleanLeadingZeros(utils, sectionValue, maxLength);
+          sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
         }
       }
     }
@@ -461,7 +508,7 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
  * 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 const getDateFromDateSections = (utils, sections) => {
+export const getDateFromDateSections = (utils, sections, localizedDigits) => {
   // If we have both a day and a weekDay section,
   // Then we skip the weekDay in the parsing because libraries like dayjs can't parse complicated formats containing a weekDay.
   // dayjs(dayjs().format('dddd MMMM D YYYY'), 'dddd MMMM D YYYY')) // returns `Invalid Date` even if the format is valid.
@@ -473,16 +520,16 @@ export const getDateFromDateSections = (utils, sections) => {
     const shouldSkip = shouldSkipWeekDays && section.type === 'weekDay';
     if (!shouldSkip) {
       sectionFormats.push(section.format);
-      sectionValues.push(getSectionVisibleValue(section, 'non-input'));
+      sectionValues.push(getSectionVisibleValue(section, 'non-input', localizedDigits));
     }
   }
   const formatWithoutSeparator = sectionFormats.join(' ');
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return utils.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForInputFromSections = (sections, isRTL) => {
+export const createDateStrForInputFromSections = (sections, localizedDigits, isRTL) => {
   const formattedSections = sections.map(section => {
-    const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr');
+    const dateValue = getSectionVisibleValue(section, isRTL ? 'input-rtl' : 'input-ltr', localizedDigits);
     return `${section.startSeparator}${dateValue}${section.endSeparator}`;
   });
   const dateStr = formattedSections.join('');
@@ -497,7 +544,7 @@ 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, timezone) => {
+export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
   const today = utils.date(undefined, timezone);
   const endOfYear = utils.endOfYear(today);
   const endOfDay = utils.endOfDay(today);
@@ -556,11 +603,11 @@ export const getSectionsBoundaries = (utils, timezone) => {
       format
     }) => {
       const lastHourInDay = utils.getHours(endOfDay);
-      const hasMeridiem = utils.formatByString(utils.endOfDay(today), format) !== lastHourInDay.toString();
+      const hasMeridiem = removeLocalizedDigits(utils.formatByString(utils.endOfDay(today), format), localizedDigits) !== lastHourInDay.toString();
       if (hasMeridiem) {
         return {
           minimum: 1,
-          maximum: Number(utils.formatByString(utils.startOfDay(today), format))
+          maximum: Number(removeLocalizedDigits(utils.formatByString(utils.startOfDay(today), format), localizedDigits))
         };
       }
       return {