@mui/x-date-pickers 7.16.0 → 7.18.0

package/node/internals/hooks/useField/useField.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useValidation = require("../useValidation");
+var _validation = require("../../../validation");
 var _useUtils = require("../useUtils");
 var _useField = require("./useField.utils");
 var _useFieldState = require("./useFieldState");
@@ -166,18 +166,23 @@ const useField = params => {
   (0, _useEnhancedEffect.default)(() => {
     interactions.syncSelectionToDOM();
   });
-  const validationError = (0, _useValidation.useValidation)((0, _extends2.default)({}, internalProps, {
+  const {
+    hasValidationError
+  } = (0, _validation.useValidation)({
+    props: internalProps,
+    validator,
+    timezone,
     value: state.value,
-    timezone
-  }), validator, valueManager.isSameError, valueManager.defaultErrorState);
+    onError: internalProps.onError
+  });
   const inputError = React.useMemo(() => {
     // only override when `error` is undefined.
     // in case of multi input fields, the `error` value is provided externally and will always be defined.
     if (error !== undefined) {
       return error;
     }
-    return valueManager.hasError(validationError);
-  }, [valueManager, validationError, error]);
+    return hasValidationError;
+  }, [hasValidationError, error]);
   React.useEffect(() => {
     if (!inputError && activeSectionIndex == null) {
       resetCharacterQuery();

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

@@ -118,10 +118,8 @@ const useFieldState = params => {
       validationError: validator({
         adapter,
         value,
-        props: (0, _extends2.default)({}, internalProps, {
-          value,
-          timezone
-        })
+        timezone,
+        props: internalProps
       })
     };
     handleValueChange(value, context);

package/node/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -15,7 +15,6 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickersModalDialog = require("../../components/PickersModalDialog");
 var _usePicker = require("../usePicker");
 var _utils = require("../../utils/utils");
-var _useUtils = require("../useUtils");
 var _LocalizationProvider = require("../../../LocalizationProvider");
 var _PickersLayout = require("../../../PickersLayout");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -50,7 +49,6 @@ const useMobilePicker = _ref => {
     disabled,
     localeText
   } = props;
-  const utils = (0, _useUtils.useUtils)();
   const fieldRef = React.useRef(null);
   const labelId = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
@@ -97,7 +95,7 @@ const useMobilePicker = _ref => {
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
   fieldProps.inputProps = (0, _extends2.default)({}, fieldProps.inputProps, {
-    'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils)
+    'aria-label': getOpenDialogAriaText(pickerFieldProps.value)
   });
   const slotsForField = (0, _extends2.default)({
     textField: slots.textField

package/node/internals/hooks/usePicker/usePicker.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePicker = void 0;
+var _warning = require("@mui/x-internals/warning");
 var _usePickerValue = require("./usePickerValue");
 var _usePickerViews = require("./usePickerViews");
 var _usePickerLayoutProps = require("./usePickerLayoutProps");
-var _warning = require("../../utils/warning");
 const usePicker = ({
   props,
   valueManager,

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

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useOpenState = require("../useOpenState");
 var _useUtils = require("../useUtils");
-var _useValidation = require("../useValidation");
+var _validation = require("../../../validation");
 var _useValueWithTimezone = require("../useValueWithTimezone");
 /**
  * Decide if the new value should be published
@@ -187,10 +187,15 @@ const usePickerValue = ({
       hasBeenModifiedSinceMount: false
     };
   });
-  (0, _useValidation.useValidation)((0, _extends2.default)({}, props, {
+  const {
+    getValidationErrorForNewValue
+  } = (0, _validation.useValidation)({
+    props,
+    validator,
+    timezone,
     value: dateState.draft,
-    timezone
-  }), validator, valueManager.isSameError, valueManager.defaultErrorState);
+    onError: props.onError
+  });
   const updateDate = (0, _useEventCallback.default)(action => {
     const updaterParams = {
       action,
@@ -211,14 +216,7 @@ const usePickerValue = ({
     let cachedContext = null;
     const getContext = () => {
       if (!cachedContext) {
-        const validationError = action.name === 'setValueFromField' ? action.context.validationError : validator({
-          adapter,
-          value: action.value,
-          props: (0, _extends2.default)({}, props, {
-            value: action.value,
-            timezone
-          })
-        });
+        const validationError = action.name === 'setValueFromField' ? action.context.validationError : getValidationErrorForNewValue(action.value);
         cachedContext = {
           validationError
         };
@@ -332,10 +330,8 @@ const usePickerValue = ({
     const error = validator({
       adapter,
       value: testedValue,
-      props: (0, _extends2.default)({}, props, {
-        value: testedValue,
-        timezone
-      })
+      timezone,
+      props
     });
     return !valueManager.hasError(error);
   };

package/node/internals/index.js

@@ -105,12 +105,6 @@ Object.defineProperty(exports, "executeInTheNextEventLoopTick", {
     return _utils.executeInTheNextEventLoopTick;
   }
 });
-Object.defineProperty(exports, "extractValidationProps", {
-  enumerable: true,
-  get: function () {
-    return _extractValidationProps.extractValidationProps;
-  }
-});
 Object.defineProperty(exports, "formatMeridiem", {
   enumerable: true,
   get: function () {
@@ -213,12 +207,6 @@ Object.defineProperty(exports, "resolveTimeViewsResponse", {
     return _dateTimeUtils.resolveTimeViewsResponse;
   }
 });
-Object.defineProperty(exports, "splitFieldInternalAndForwardedProps", {
-  enumerable: true,
-  get: function () {
-    return _fields.splitFieldInternalAndForwardedProps;
-  }
-});
 Object.defineProperty(exports, "useCalendarState", {
   enumerable: true,
   get: function () {
@@ -309,42 +297,12 @@ Object.defineProperty(exports, "useUtils", {
     return _useUtils.useUtils;
   }
 });
-Object.defineProperty(exports, "useValidation", {
-  enumerable: true,
-  get: function () {
-    return _useValidation.useValidation;
-  }
-});
 Object.defineProperty(exports, "useViews", {
   enumerable: true,
   get: function () {
     return _useViews.useViews;
   }
 });
-Object.defineProperty(exports, "validateDate", {
-  enumerable: true,
-  get: function () {
-    return _validateDate.validateDate;
-  }
-});
-Object.defineProperty(exports, "validateDateTime", {
-  enumerable: true,
-  get: function () {
-    return _validateDateTime.validateDateTime;
-  }
-});
-Object.defineProperty(exports, "validateTime", {
-  enumerable: true,
-  get: function () {
-    return _validateTime.validateTime;
-  }
-});
-Object.defineProperty(exports, "warnOnce", {
-  enumerable: true,
-  get: function () {
-    return _warning.warnOnce;
-  }
-});
 var _PickersArrowSwitcher = require("./components/PickersArrowSwitcher/PickersArrowSwitcher");
 var _PickersModalDialog = require("./components/PickersModalDialog");
 var _PickersPopper = require("./components/PickersPopper");
@@ -362,22 +320,15 @@ var _usePicker = require("./hooks/usePicker");
 var _useStaticPicker = require("./hooks/useStaticPicker");
 var _useUtils = require("./hooks/useUtils");
 var _useViews = require("./hooks/useViews");
-var _useValidation = require("./hooks/useValidation");
 var _dateHelpersHooks = require("./hooks/date-helpers-hooks");
 var _convertFieldResponseIntoMuiTextFieldProps = require("./utils/convertFieldResponseIntoMuiTextFieldProps");
 var _dateUtils = require("./utils/date-utils");
 var _dateTimeUtils = require("./utils/date-time-utils");
-var _fields = require("./utils/fields");
 var _getDefaultReferenceDate = require("./utils/getDefaultReferenceDate");
 var _utils = require("./utils/utils");
 var _defaultizedFieldProps = require("./hooks/defaultizedFieldProps");
 var _useDefaultReduceAnimations = require("./hooks/useDefaultReduceAnimations");
-var _extractValidationProps = require("./utils/validation/extractValidationProps");
-var _validateDate = require("./utils/validation/validateDate");
-var _validateDateTime = require("./utils/validation/validateDateTime");
-var _validateTime = require("./utils/validation/validateTime");
 var _views = require("./utils/views");
-var _warning = require("./utils/warning");
 var _DayCalendar = require("../DateCalendar/DayCalendar");
 var _useCalendarState = require("../DateCalendar/useCalendarState");
 var _timeUtils = require("./utils/time-utils");

package/node/locales/beBY.js

@@ -39,7 +39,7 @@ const beBYPickers = {
   timePickerToolbarTitle: 'Абраць час',
   dateRangePickerToolbarTitle: 'Абраць каляндарны перыяд',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Абярыце ${views[view]}. ${time === null ? 'Час не абраны' : `Абраны час ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Абярыце ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Час не абраны' : `Абраны час ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} гадзін`,
   minutesClockNumberText: minutes => `${minutes} хвілін`,
   secondsClockNumberText: seconds => `${seconds} секунд`,
@@ -51,9 +51,9 @@ const beBYPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Тыдзень ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Абраць дату, абрана дата  ${utils.format(value, 'fullDate')}` : 'Абраць дату',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Абраць час, абрыны час  ${utils.format(value, 'fullTime')}` : 'Абраць час',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Абраць дату, абрана дата  ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Абраць дату',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Абраць час, абрыны час  ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Абраць час',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'абраць час',

package/node/locales/caES.js

@@ -37,7 +37,7 @@ const caESPickers = {
   timePickerToolbarTitle: 'Seleccionar hora',
   dateRangePickerToolbarTitle: 'Seleccionar rang de dates',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Selecciona ${views[view]}. ${time === null ? 'Hora no seleccionada' : `L'hora seleccionada és ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Selecciona ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Hora no seleccionada' : `L'hora seleccionada és ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hores`,
   minutesClockNumberText: minutes => `${minutes} minuts`,
   secondsClockNumberText: seconds => `${seconds} segons`,
@@ -49,8 +49,8 @@ const caESPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Setmana ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tria la data, la data triada és ${utils.format(value, 'fullDate')}` : 'Tria la data',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tria l'hora, l'hora triada és ${utils.format(value, 'fullTime')}` : "Tria l'hora",
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Tria la data, la data triada és ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Tria la data',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Tria l'hora, l'hora triada és ${formattedTime ?? utils.format(value, 'fullTime')}` : "Tria l'hora",
   fieldClearLabel: 'Netega el valor',
   // Table labels
   timeTableLabel: 'tria la data',

package/node/locales/csCZ.js

@@ -39,7 +39,7 @@ const csCZPickers = {
   timePickerToolbarTitle: 'Vyberte čas',
   dateRangePickerToolbarTitle: 'Vyberete rozmezí dat',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} vybrány. ${time === null ? 'Není vybrán čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view] ?? view} vybrány. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Není vybrán čas' : `Vybraný čas je ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hodin`,
   minutesClockNumberText: minutes => `${minutes} minut`,
   secondsClockNumberText: seconds => `${seconds} sekund`,
@@ -51,9 +51,9 @@ const csCZPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber} týden v roce`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte datum, vybrané datum je ${utils.format(value, 'fullDate')}` : 'Vyberte datum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vyberte datum, vybrané datum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vyberte datum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vyberte čas',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'vyberte čas',

package/node/locales/daDK.js

@@ -38,7 +38,7 @@ const daDKPickers = {
   timePickerToolbarTitle: 'Vælg tidspunkt',
   dateRangePickerToolbarTitle: 'Vælg datointerval',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Vælg ${timeViews[view] ?? view}. ${time === null ? 'Intet tidspunkt valgt' : `Valgte tidspunkt er ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Vælg ${timeViews[view] ?? view}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Intet tidspunkt valgt' : `Valgte tidspunkt er ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timer`,
   minutesClockNumberText: minutes => `${minutes} minutter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
@@ -50,8 +50,8 @@ const daDKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Uge ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${utils.format(value, 'fullDate')}` : 'Vælg dato',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vælg dato, valgte dato er ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vælg dato',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vælg tidspunkt',
   fieldClearLabel: 'ryd felt',
   // Table labels
   timeTableLabel: 'vælg tidspunkt',

package/node/locales/deDE.js

@@ -38,7 +38,7 @@ const deDEPickers = {
   timePickerToolbarTitle: 'Uhrzeit auswählen',
   dateRangePickerToolbarTitle: 'Datumsbereich auswählen',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} auswählen. ${time === null ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view] ?? view} auswählen. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Keine Uhrzeit ausgewählt' : `Gewählte Uhrzeit ist ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes}`,
   secondsClockNumberText: seconds => `${seconds}  ${timeViews.seconds}`,
@@ -50,8 +50,8 @@ const deDEPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Woche ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Datum auswählen, gewähltes Datum ist ${utils.format(value, 'fullDate')}` : 'Datum auswählen',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${utils.format(value, 'fullTime')}` : 'Uhrzeit auswählen',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Datum auswählen, gewähltes Datum ist ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Datum auswählen',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Uhrzeit auswählen',
   fieldClearLabel: 'Wert leeren',
   // Table labels
   timeTableLabel: 'Uhrzeit auswählen',

package/node/locales/elGR.js

@@ -38,7 +38,7 @@ const elGRPickers = {
   timePickerToolbarTitle: 'Επιλέξτε ώρα',
   dateRangePickerToolbarTitle: 'Επιλέξτε εύρος ημερομηνιών',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Επιλέξτε ${views[view]}. ${time === null ? 'Δεν έχει επιλεγεί ώρα' : `Η επιλεγμένη ώρα είναι ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Επιλέξτε ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Δεν έχει επιλεγεί ώρα' : `Η επιλεγμένη ώρα είναι ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ώρες`,
   minutesClockNumberText: minutes => `${minutes} λεπτά`,
   secondsClockNumberText: seconds => `${seconds} δευτερόλεπτα`,
@@ -50,9 +50,9 @@ const elGRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Εβδομάδα ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Επιλέξτε ημερομηνία, η επιλεγμένη ημερομηνία είναι ${utils.format(value, 'fullDate')}` : 'Επιλέξτε ημερομηνία',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Επιλέξτε ώρα, η επιλεγμένη ώρα είναι ${utils.format(value, 'fullTime')}` : 'Επιλέξτε ώρα',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Επιλέξτε ημερομηνία, η επιλεγμένη ημερομηνία είναι ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Επιλέξτε ημερομηνία',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Επιλέξτε ώρα, η επιλεγμένη ώρα είναι ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Επιλέξτε ώρα',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'επιλέξτε ώρα',

package/node/locales/enUS.js

@@ -33,7 +33,7 @@ const enUSPickers = {
   timePickerToolbarTitle: 'Select time',
   dateRangePickerToolbarTitle: 'Select date range',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Select ${view}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'No time selected' : `Selected time is ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hours`,
   minutesClockNumberText: minutes => `${minutes} minutes`,
   secondsClockNumberText: seconds => `${seconds} seconds`,
@@ -45,9 +45,9 @@ const enUSPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choose date, selected date is ${utils.format(value, 'fullDate')}` : 'Choose date',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choose time, selected time is ${utils.format(value, 'fullTime')}` : 'Choose time',
-  fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Choose date, selected date is ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Choose date',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Choose time, selected time is ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Choose time',
+  fieldClearLabel: 'Clear',
   // Table labels
   timeTableLabel: 'pick time',
   dateTableLabel: 'pick date',

package/node/locales/esES.js

@@ -37,7 +37,7 @@ const esESPickers = {
   timePickerToolbarTitle: 'Seleccionar hora',
   dateRangePickerToolbarTitle: 'Seleccionar rango de fecha',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Seleccione ${views[view]}. ${time === null ? 'No hay hora seleccionada' : `La hora seleccionada es ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Seleccione ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'No hay hora seleccionada' : `La hora seleccionada es ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} horas`,
   minutesClockNumberText: minutes => `${minutes} minutos`,
   secondsClockNumberText: seconds => `${seconds} segundos`,
@@ -49,8 +49,8 @@ const esESPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Semana ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Elige fecha, la fecha elegida es ${utils.format(value, 'fullDate')}` : 'Elige fecha',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Elige hora, la hora elegida es ${utils.format(value, 'fullTime')}` : 'Elige hora',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Elige fecha, la fecha elegida es ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Elige fecha',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Elige hora, la hora elegida es ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Elige hora',
   fieldClearLabel: 'Limpiar valor',
   // Table labels
   timeTableLabel: 'elige hora',

package/node/locales/eu.js

@@ -38,7 +38,7 @@ const euPickers = {
   timePickerToolbarTitle: 'Ordua aukeratu',
   dateRangePickerToolbarTitle: 'Data tartea aukeratu',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Aukeratu ${views[view]}. ${time === null ? 'Ez da ordurik aukertau' : `Aukeratutako ordua ${adapter.format(time, 'fullTime')} da`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Aukeratu ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ez da ordurik aukertau' : `Aukeratutako ordua ${formattedTime ?? utils.format(time, 'fullTime')} da`}`,
   hoursClockNumberText: hours => `${hours} ordu`,
   minutesClockNumberText: minutes => `${minutes} minutu`,
   secondsClockNumberText: seconds => `${seconds} segundu`,
@@ -50,8 +50,8 @@ const euPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber} astea`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Data aukeratu, aukeratutako data ${utils.format(value, 'fullDate')} da` : 'Data aukeratu',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Ordua aukeratu, aukeratutako ordua ${utils.format(value, 'fullTime')} da` : 'Ordua aukeratu',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Data aukeratu, aukeratutako data ${formattedDate ?? utils.format(value, 'fullDate')} da` : 'Data aukeratu',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Ordua aukeratu, aukeratutako ordua ${formattedTime ?? utils.format(value, 'fullTime')} da` : 'Ordua aukeratu',
   fieldClearLabel: 'Balioa garbitu',
   // Table labels
   timeTableLabel: 'ordua aukeratu',

package/node/locales/faIR.js

@@ -37,7 +37,7 @@ const faIRPickers = {
   timePickerToolbarTitle: 'ساعت را انتخاب کنید',
   dateRangePickerToolbarTitle: 'محدوده تاریخ را انتخاب کنید',
   // Clock labels
-  clockLabelText: (view, time, adapter) => ` را انتخاب کنید ${timeViews[view]}. ${time === null ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${adapter.format(time, 'fullTime')} می باشد`}`,
+  clockLabelText: (view, time, utils, formattedTime) => ` را انتخاب کنید ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'هیچ ساعتی انتخاب نشده است' : `ساعت انتخاب ${formattedTime ?? utils.format(time, 'fullTime')} می باشد`}`,
   hoursClockNumberText: hours => `${hours} ساعت‌ها`,
   minutesClockNumberText: minutes => `${minutes} دقیقه‌ها`,
   secondsClockNumberText: seconds => `${seconds} ثانیه‌ها`,
@@ -49,8 +49,8 @@ const faIRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `هفته ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${utils.format(value, 'fullDate')} می‌باشد` : 'تاریخ را انتخاب کنید',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می‌باشد` : 'ساعت را انتخاب کنید',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `تاریخ را انتخاب کنید، تاریخ انتخاب شده ${formattedDate ?? utils.format(value, 'fullDate')} می‌باشد` : 'تاریخ را انتخاب کنید',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${formattedTime ?? utils.format(value, 'fullTime')} می‌باشد` : 'ساعت را انتخاب کنید',
   fieldClearLabel: 'پاک کردن مقدار',
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',

package/node/locales/fiFI.js

@@ -37,7 +37,7 @@ const fiFIPickers = {
   timePickerToolbarTitle: 'Valitse aika',
   dateRangePickerToolbarTitle: 'Valitse aikaväli',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Valitse ${views[view]}. ${time === null ? 'Ei aikaa valittuna' : `Valittu aika on ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Valitse ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ei aikaa valittuna' : `Valittu aika on ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} tuntia`,
   minutesClockNumberText: minutes => `${minutes} minuuttia`,
   secondsClockNumberText: seconds => `${seconds} sekuntia`,
@@ -49,8 +49,8 @@ const fiFIPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Viikko ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse päivä, valittu päivä on ${utils.format(value, 'fullDate')}` : 'Valitse päivä',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Valitse päivä, valittu päivä on ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Valitse päivä',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Valitse aika',
   fieldClearLabel: 'Tyhjennä arvo',
   // Table labels
   timeTableLabel: 'valitse aika',

package/node/locales/frFR.js

@@ -37,7 +37,7 @@ const frFRPickers = {
   timePickerToolbarTitle: "Choisir l'heure",
   dateRangePickerToolbarTitle: 'Choisir la plage de dates',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Choix des ${views[view]}. ${time === null ? 'Aucune heure choisie' : `L'heure choisie est ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Choix des ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Aucune heure choisie' : `L'heure choisie est ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} heures`,
   minutesClockNumberText: minutes => `${minutes} minutes`,
   secondsClockNumberText: seconds => `${seconds} secondes`,
@@ -49,8 +49,8 @@ const frFRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Semaine ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${utils.format(value, 'fullDate')}` : 'Choisir la date',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure",
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Choisir la date, la date sélectionnée est ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Choisir la date',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime ? `Choisir l'heure, l'heure sélectionnée est ${formattedTime ?? utils.format(value, 'fullTime')}` : "Choisir l'heure",
   fieldClearLabel: 'Effacer la valeur',
   // Table labels
   timeTableLabel: "choix de l'heure",

package/node/locales/heIL.js

@@ -37,7 +37,7 @@ const heILPickers = {
   timePickerToolbarTitle: 'בחירת שעה',
   dateRangePickerToolbarTitle: 'בחירת טווח תאריכים',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `בחירת ${views[view]}. ${time === null ? 'לא נבחרה שעה' : `השעה הנבחרת היא ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `בחירת ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'לא נבחרה שעה' : `השעה הנבחרת היא ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} שעות`,
   minutesClockNumberText: minutes => `${minutes} דקות`,
   secondsClockNumberText: seconds => `${seconds} שניות`,
@@ -49,8 +49,8 @@ const heILPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `שבוע ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `בחירת תאריך, התאריך שנבחר הוא ${utils.format(value, 'fullDate')}` : 'בחירת תאריך',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `בחירת שעה, השעה שנבחרה היא ${utils.format(value, 'fullTime')}` : 'בחירת שעה',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `בחירת תאריך, התאריך שנבחר הוא ${formattedDate ?? utils.format(value, 'fullDate')}` : 'בחירת תאריך',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `בחירת שעה, השעה שנבחרה היא ${formattedTime ?? utils.format(value, 'fullTime')}` : 'בחירת שעה',
   fieldClearLabel: 'נקה ערך',
   // Table labels
   timeTableLabel: 'בחירת שעה',

package/node/locales/huHU.js

@@ -38,7 +38,7 @@ const huHUPickers = {
   timePickerToolbarTitle: 'Idő kiválasztása',
   dateRangePickerToolbarTitle: 'Dátumhatárok kiválasztása',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} kiválasztása. ${time === null ? 'Nincs kiválasztva idő' : `A kiválasztott idő ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view] ?? view} kiválasztása. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nincs kiválasztva idő' : `A kiválasztott idő ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours.toLowerCase()}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes.toLowerCase()}`,
   secondsClockNumberText: seconds => `${seconds}  ${timeViews.seconds.toLowerCase()}`,
@@ -50,8 +50,8 @@ const huHUPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber}. hét`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Válasszon dátumot, a kiválasztott dátum: ${utils.format(value, 'fullDate')}` : 'Válasszon dátumot',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Válasszon időt, a kiválasztott idő: ${utils.format(value, 'fullTime')}` : 'Válasszon időt',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Válasszon dátumot, a kiválasztott dátum: ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Válasszon dátumot',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Válasszon időt, a kiválasztott idő: ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Válasszon időt',
   fieldClearLabel: 'Tartalom ürítése',
   // Table labels
   timeTableLabel: 'válasszon időt',

package/node/locales/isIS.js

@@ -38,7 +38,7 @@ const isISPickers = {
   timePickerToolbarTitle: 'Velja tíma',
   dateRangePickerToolbarTitle: 'Velja tímabil',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Velja ${timeViews[view]}. ${time === null ? 'Enginn tími valinn' : `Valinn tími er ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Velja ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Enginn tími valinn' : `Valinn tími er ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} klukkustundir`,
   minutesClockNumberText: minutes => `${minutes} mínútur`,
   secondsClockNumberText: seconds => `${seconds} sekúndur`,
@@ -50,9 +50,9 @@ const isISPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Vika ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velja dagsetningu, valin dagsetning er ${utils.format(value, 'fullDate')}` : 'Velja dagsetningu',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velja tíma, valinn tími er ${utils.format(value, 'fullTime')}` : 'Velja tíma',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Velja dagsetningu, valin dagsetning er ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Velja dagsetningu',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Velja tíma, valinn tími er ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Velja tíma',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'velja tíma',

package/node/locales/itIT.js

@@ -37,7 +37,7 @@ const itITPickers = {
   timePickerToolbarTitle: 'Seleziona orario',
   dateRangePickerToolbarTitle: 'Seleziona intervallo di date',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Seleziona ${views[view]}. ${time === null ? 'Nessun orario selezionato' : `L'ora selezionata è ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Seleziona ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nessun orario selezionato' : `L'ora selezionata è ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ore`,
   minutesClockNumberText: minutes => `${minutes} minuti`,
   secondsClockNumberText: seconds => `${seconds} secondi`,
@@ -49,8 +49,8 @@ const itITPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Settimana ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli la data, la data selezionata è ${utils.format(value, 'fullDate')}` : 'Scegli la data',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora",
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Scegli la data, la data selezionata è ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Scegli la data',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${formattedTime ?? utils.format(value, 'fullTime')}` : "Scegli l'ora",
   fieldClearLabel: 'Cancella valore',
   // Table labels
   timeTableLabel: "scegli un'ora",