@mui/x-date-pickers 7.16.0 → 7.17.0

package/modern/locales/mk.js

@@ -29,7 +29,7 @@ const mkPickers = {
   timePickerToolbarTitle: 'Избери време',
   dateRangePickerToolbarTitle: 'Избери временски опсег',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Select ${view}. ${time === null ? 'Нема избрано време' : `Избраното време е ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Select ${view}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Нема избрано време' : `Избраното време е ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} часа`,
   minutesClockNumberText: minutes => `${minutes} минути`,
   secondsClockNumberText: seconds => `${seconds} секунди`,
@@ -41,8 +41,8 @@ const mkPickers = {
   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/modern/locales/nbNO.js

@@ -32,7 +32,7 @@ const nbNOPickers = {
   timePickerToolbarTitle: 'Velg klokkeslett',
   dateRangePickerToolbarTitle: 'Velg datoperiode',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Velg ${timeViews[view]}. ${time === null ? 'Ingen tid valgt' : `Valgt tid er ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Velg ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ingen tid valgt' : `Valgt tid er ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timer`,
   minutesClockNumberText: minutes => `${minutes} minutter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
@@ -44,9 +44,9 @@ const nbNOPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Uke ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velg dato, valgt dato er ${utils.format(value, 'fullDate')}` : 'Velg dato',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velg tid, valgt tid er ${utils.format(value, 'fullTime')}` : 'Velg tid',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Velg dato, valgt dato er ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Velg dato',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Velg tid, valgt tid er ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Velg tid',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'velg tid',

package/modern/locales/nlNL.js

@@ -31,7 +31,7 @@ const nlNLPickers = {
   timePickerToolbarTitle: 'Selecteer tijd',
   dateRangePickerToolbarTitle: 'Selecteer datumbereik',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Selecteer ${timeViews[view]}. ${time === null ? 'Geen tijd geselecteerd' : `Geselecteerde tijd is ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Selecteer ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Geen tijd geselecteerd' : `Geselecteerde tijd is ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} uren`,
   minutesClockNumberText: minutes => `${minutes} minuten`,
   secondsClockNumberText: seconds => `${seconds} seconden`,
@@ -43,8 +43,8 @@ const nlNLPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Kies datum, geselecteerde datum is ${utils.format(value, 'fullDate')}` : 'Kies datum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Kies tijd, geselecteerde tijd is ${utils.format(value, 'fullTime')}` : 'Kies tijd',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Kies datum, geselecteerde datum is ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Kies datum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Kies tijd, geselecteerde tijd is ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Kies tijd',
   fieldClearLabel: 'Wissen',
   // Table labels
   timeTableLabel: 'kies tijd',

package/modern/locales/nnNO.js

@@ -31,7 +31,7 @@ const nnNOPickers = {
   timePickerToolbarTitle: 'Vel klokkeslett',
   dateRangePickerToolbarTitle: 'Vel datoperiode',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Vel ${timeViews[view]}. ${time === null ? 'Ingen tid vald' : `Vald tid er ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Vel ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ingen tid vald' : `Vald tid er ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timar`,
   minutesClockNumberText: minutes => `${minutes} minuttar`,
   secondsClockNumberText: seconds => `${seconds} sekundar`,
@@ -43,8 +43,8 @@ const nnNOPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Veke ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vel dato, vald dato er ${utils.format(value, 'fullDate')}` : 'Vel dato',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vel tid, vald tid er ${utils.format(value, 'fullTime')}` : 'Vel tid',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vel dato, vald dato er ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vel dato',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vel tid, vald tid er ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vel tid',
   fieldClearLabel: 'Fjern verdi',
   // Table labels
   timeTableLabel: 'vel tid',

package/modern/locales/plPL.js

@@ -32,7 +32,7 @@ const plPLPickers = {
   timePickerToolbarTitle: 'Wybierz czas',
   dateRangePickerToolbarTitle: 'Wybierz zakres dat',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Wybierz ${timeViews[view]}. ${time === null ? 'Nie wybrano czasu' : `Wybrany czas to ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Wybierz ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nie wybrano czasu' : `Wybrany czas to ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} godzin`,
   minutesClockNumberText: minutes => `${minutes} minut`,
   secondsClockNumberText: seconds => `${seconds} sekund`,
@@ -44,9 +44,9 @@ const plPLPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Tydzień ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${utils.format(value, 'fullDate')}` : 'Wybierz datę',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${utils.format(value, 'fullTime')}` : 'Wybierz czas',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => value != null && utils.isValid(value) ? `Wybierz datę, obecnie wybrana data to ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Wybierz datę',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Wybierz czas',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'wybierz czas',

package/modern/locales/ptBR.js

@@ -31,7 +31,7 @@ const ptBRPickers = {
   timePickerToolbarTitle: 'Selecione a hora',
   dateRangePickerToolbarTitle: 'Selecione o intervalo entre datas',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Selecione ${timeViews[view]}. ${time === null ? 'Hora não selecionada' : `Selecionado a hora ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Selecione ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Hora não selecionada' : `Selecionado a hora ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} horas`,
   minutesClockNumberText: minutes => `${minutes} minutos`,
   secondsClockNumberText: seconds => `${seconds} segundos`,
@@ -43,9 +43,9 @@ const ptBRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Semana ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Escolha uma data, data selecionada ${utils.format(value, 'fullDate')}` : 'Escolha uma data',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Escolha uma hora, hora selecionada ${utils.format(value, 'fullTime')}` : 'Escolha uma hora',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Escolha uma data, data selecionada ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Escolha uma data',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Escolha uma hora, hora selecionada ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Escolha uma hora',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'escolha uma hora',

package/modern/locales/roRO.js

@@ -33,7 +33,7 @@ const roROPickers = {
   timePickerToolbarTitle: 'Selectați ora',
   dateRangePickerToolbarTitle: 'Selectați intervalul de date',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Selectați ${timeViews[view] ?? view}. ${time === null ? 'Nicio oră selectată' : `Ora selectată este ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Selectați ${timeViews[view] ?? view}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nicio oră selectată' : `Ora selectată este ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} ${timeViews.hours}`,
   minutesClockNumberText: minutes => `${minutes} ${timeViews.minutes}`,
   secondsClockNumberText: seconds => `${seconds}  ${timeViews.seconds}`,
@@ -45,8 +45,8 @@ const roROPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Săptămâna ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Selectați data, data selectată este ${utils.format(value, 'fullDate')}` : 'Selectați data',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Selectați ora, ora selectată este ${utils.format(value, 'fullTime')}` : 'Selectați ora',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Selectați data, data selectată este ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Selectați data',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Selectați ora, ora selectată este ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Selectați ora',
   fieldClearLabel: 'Golire conținut',
   // Table labels
   timeTableLabel: 'Selectați ora',

package/modern/locales/ruRU.js

@@ -32,7 +32,7 @@ const ruRUPickers = {
   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} секунд`,
@@ -44,8 +44,8 @@ const ruRUPickers = {
   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/modern/locales/skSK.js

@@ -33,7 +33,7 @@ const skSKPickers = {
   timePickerToolbarTitle: 'Vyberte čas',
   dateRangePickerToolbarTitle: 'Vyberete rozmedzie dátumov',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} vybraný. ${time === null ? 'Nie je vybraný čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view] ?? view} vybraný. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nie je vybraný čas' : `Vybraný čas je ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hodín`,
   minutesClockNumberText: minutes => `${minutes} minút`,
   secondsClockNumberText: seconds => `${seconds} sekúnd`,
@@ -45,9 +45,9 @@ const skSKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber} týždeň v roku`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte dátum, vybraný dátum je ${utils.format(value, 'fullDate')}` : 'Vyberte dátum',
-  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 dátum, vybraný dátum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vyberte dátum',
+  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/modern/locales/svSE.js

@@ -31,7 +31,7 @@ const svSEPickers = {
   timePickerToolbarTitle: 'Välj tid',
   dateRangePickerToolbarTitle: 'Välj datumintervall',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Välj ${timeViews[view]}. ${time === null ? 'Ingen tid vald' : `Vald tid är ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Välj ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ingen tid vald' : `Vald tid är ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timmar`,
   minutesClockNumberText: minutes => `${minutes} minuter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
@@ -43,8 +43,8 @@ const svSEPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Vecka ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Välj datum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Välj tid',
   fieldClearLabel: 'Rensa värde',
   // Table labels
   timeTableLabel: 'välj tid',

package/modern/locales/trTR.js

@@ -32,7 +32,7 @@ const trTRPickers = {
   timePickerToolbarTitle: 'Saat seç',
   dateRangePickerToolbarTitle: 'Tarih aralığı seçin',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view]} seç.  ${time === null ? 'Zaman seçilmedi' : `Seçilen zaman: ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} seç.  ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Zaman seçilmedi' : `Seçilen zaman: ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} saat`,
   minutesClockNumberText: minutes => `${minutes} dakika`,
   secondsClockNumberText: seconds => `${seconds} saniye`,
@@ -44,9 +44,9 @@ const trTRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Hafta ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${utils.format(value, 'fullDate')}` : 'Tarih seç',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${utils.format(value, 'fullTime')}` : 'Saat seç',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Tarih seç',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Saat seç',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'saat seç',

package/modern/locales/ukUA.js

@@ -31,7 +31,7 @@ const ukUAPickers = {
   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} секунд`,
@@ -43,8 +43,8 @@ const ukUAPickers = {
   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/modern/locales/urPK.js

@@ -32,7 +32,7 @@ const urPKPickers = {
   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} سیکنڈ`,
@@ -44,9 +44,9 @@ const urPKPickers = {
   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/modern/locales/utils/getPickersLocalization.js

@@ -9,4 +9,17 @@ export const getPickersLocalization = pickersTranslations => {
       }
     }
   };
+};
+export const buildGetOpenDialogAriaText = params => {
+  const {
+    utils,
+    formatKey,
+    contextTranslation,
+    propsTranslation
+  } = params;
+  return value => {
+    const formattedValue = value !== null && utils.isValid(value) ? utils.format(value, formatKey) : null;
+    const translation = propsTranslation ?? contextTranslation;
+    return translation(value, utils, formattedValue);
+  };
 };

package/modern/locales/viVN.js

@@ -31,7 +31,7 @@ const viVNPickers = {
   timePickerToolbarTitle: 'Chọn giờ',
   dateRangePickerToolbarTitle: 'Chọn khoảng ngày',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Chọn ${views[view]}. ${time === null ? 'Không có giờ được chọn' : `Giờ được chọn là ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Chọn ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Không có giờ được chọn' : `Giờ được chọn là ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} giờ`,
   minutesClockNumberText: minutes => `${minutes} phút`,
   secondsClockNumberText: seconds => `${seconds} giây`,
@@ -43,8 +43,8 @@ const viVNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Tuần ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${utils.format(value, 'fullDate')}` : 'Chọn ngày',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${utils.format(value, 'fullTime')}` : 'Chọn giờ',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Chọn ngày',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Chọn giờ',
   fieldClearLabel: 'Xóa giá trị',
   // Table labels
   timeTableLabel: 'chọn giờ',

package/modern/locales/zhCN.js

@@ -31,7 +31,7 @@ const zhCNPickers = {
   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}秒`,
@@ -43,8 +43,8 @@ const zhCNPickers = {
   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/modern/locales/zhHK.js

@@ -31,7 +31,7 @@ const zhHKPickers = {
   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}秒`,
@@ -43,8 +43,8 @@ const zhHKPickers = {
   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/modern/validation/index.js

@@ -0,0 +1,5 @@
+export { validateDate } from "./validateDate.js";
+export { validateTime } from "./validateTime.js";
+export { validateDateTime } from "./validateDateTime.js";
+export { extractValidationProps } from "./extractValidationProps.js";
+export { useValidation } from "./useValidation.js";

package/modern/validation/useValidation.js

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useLocalizationContext } from "../internals/hooks/useUtils.js";
+/**
+ * Utility hook to check if a given value is valid based on the provided validation props.
+ * @template TDate
+ * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+ * @param {UseValidationOptions<TValue, TDate, TError, TValidationProps>} options The options to configure the hook.
+ * @param {TValue} options.value The value to validate.
+ * @param {PickersTimezone} options.timezone The timezone to use for the validation.
+ * @param {Validator<TValue, TDate, TError, TValidationProps>} options.validator The validator function to use.
+ * @param {TValidationProps} options.props The validation props, they differ depending on the component.
+ * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes.
+ */
+export function useValidation(options) {
+  const {
+    props,
+    validator,
+    value,
+    timezone,
+    onError
+  } = options;
+  const adapter = useLocalizationContext();
+  const previousValidationErrorRef = React.useRef(validator.valueManager.defaultErrorState);
+  const validationError = validator({
+    adapter,
+    value,
+    timezone,
+    props
+  });
+  const hasValidationError = validator.valueManager.hasError(validationError);
+  React.useEffect(() => {
+    if (onError && !validator.valueManager.isSameError(validationError, previousValidationErrorRef.current)) {
+      onError(validationError, value);
+    }
+    previousValidationErrorRef.current = validationError;
+  }, [validator, onError, validationError, value]);
+  const getValidationErrorForNewValue = useEventCallback(newValue => {
+    return validator({
+      adapter,
+      value: newValue,
+      timezone,
+      props
+    });
+  });
+  return {
+    validationError,
+    hasValidationError,
+    getValidationErrorForNewValue
+  };
+}

package/{internals/utils → modern}/validation/validateDate.js

@@ -1,7 +1,9 @@
-import { applyDefaultDate } from "../date-utils.js";
+import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 export const validateDate = ({
   props,
   value,
+  timezone,
   adapter
 }) => {
   if (value === null) {
@@ -12,8 +14,7 @@ export const validateDate = ({
     shouldDisableMonth,
     shouldDisableYear,
     disablePast,
-    disableFuture,
-    timezone
+    disableFuture
   } = props;
   const now = adapter.utils.date(undefined, timezone);
   const minDate = applyDefaultDate(adapter.utils, props.minDate, adapter.defaultDates.minDate);
@@ -38,4 +39,5 @@ export const validateDate = ({
     default:
       return null;
   }
-};
+};
+validateDate.valueManager = singleItemValueManager;

package/modern/{internals/utils/validation → validation}/validateDateTime.js

@@ -1,13 +1,16 @@
 import { validateDate } from "./validateDate.js";
 import { validateTime } from "./validateTime.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 export const validateDateTime = ({
-  props,
+  adapter,
   value,
-  adapter
+  timezone,
+  props
 }) => {
   const dateValidationResult = validateDate({
     adapter,
     value,
+    timezone,
     props
   });
   if (dateValidationResult !== null) {
@@ -16,6 +19,8 @@ export const validateDateTime = ({
   return validateTime({
     adapter,
     value,
+    timezone,
     props
   });
-};
+};
+validateDateTime.valueManager = singleItemValueManager;

package/{internals/utils → modern}/validation/validateTime.js

@@ -1,7 +1,9 @@
-import { createIsAfterIgnoreDatePart } from "../time-utils.js";
+import { createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
+import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 export const validateTime = ({
   adapter,
   value,
+  timezone,
   props
 }) => {
   if (value === null) {
@@ -14,8 +16,7 @@ export const validateTime = ({
     shouldDisableTime,
     disableIgnoringDatePartForTimeValidation = false,
     disablePast,
-    disableFuture,
-    timezone
+    disableFuture
   } = props;
   const now = adapter.utils.date(undefined, timezone);
   const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter.utils);
@@ -41,4 +42,5 @@ export const validateTime = ({
     default:
       return null;
   }
-};
+};
+validateTime.valueManager = singleItemValueManager;

package/node/AdapterDayjs/AdapterDayjs.js

@@ -12,7 +12,7 @@ var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customPars
 var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
 var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
 var _advancedFormat = _interopRequireDefault(require("dayjs/plugin/advancedFormat"));
-var _warning = require("../internals/utils/warning");
+var _warning = require("@mui/x-internals/warning");
 /* eslint-disable class-methods-use-this */
 
 _dayjs.default.extend(_localizedFormat.default);

package/node/DateCalendar/DateCalendar.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/DateCalendar/useCalendarState.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/DateCalendar/useIsDateDisabled.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -6,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useIsDateDisabled = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _validateDate = require("../internals/utils/validation/validateDate");
+var _validation = require("../validation");
 var _useUtils = require("../internals/hooks/useUtils");
 const useIsDateDisabled = ({
   shouldDisableDate,
@@ -19,9 +20,10 @@ const useIsDateDisabled = ({
   timezone
 }) => {
   const adapter = (0, _useUtils.useLocalizationContext)();
-  return React.useCallback(day => (0, _validateDate.validateDate)({
+  return React.useCallback(day => (0, _validation.validateDate)({
     adapter,
     value: day,
+    timezone,
     props: {
       shouldDisableDate,
       shouldDisableMonth,
@@ -29,8 +31,7 @@ const useIsDateDisabled = ({
       minDate,
       maxDate,
       disableFuture,
-      disablePast,
-      timezone
+      disablePast
     }
   }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, timezone]);
 };

package/node/DateField/DateField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;