diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index 78f5c7cd8618..b4ad5a30aea4 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -3,264 +3,264 @@ "languageTag": "eu", "importName": "eu", "localeName": "Basque", - "missingKeysCount": 4, - "totalKeysCount": 41, + "missingKeysCount": 13, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/eu.ts" }, { "languageTag": "be-BY", "importName": "beBY", "localeName": "Belarusian", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/beBY.ts" }, { "languageTag": "ca-ES", "importName": "caES", "localeName": "Catalan", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/caES.ts" }, { "languageTag": "zh-HK", "importName": "zhHK", "localeName": "Chinese (Hong Kong)", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", "importName": "zhCN", "localeName": "Chinese (Simplified)", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/zhCN.ts" }, { "languageTag": "cs-CZ", "importName": "csCZ", "localeName": "Czech", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/csCZ.ts" }, { "languageTag": "da-DK", "importName": "daDK", "localeName": "Danish", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/daDK.ts" }, { "languageTag": "nl-NL", "importName": "nlNL", "localeName": "Dutch", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", "importName": "fiFI", "localeName": "Finnish", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", "importName": "frFR", "localeName": "French", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/frFR.ts" }, { "languageTag": "de-DE", "importName": "deDE", "localeName": "German", - "missingKeysCount": 4, - "totalKeysCount": 41, + "missingKeysCount": 13, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/deDE.ts" }, { "languageTag": "el-GR", "importName": "elGR", "localeName": "Greek", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/elGR.ts" }, { "languageTag": "he-IL", "importName": "heIL", "localeName": "Hebrew", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/heIL.ts" }, { "languageTag": "hu-HU", "importName": "huHU", "localeName": "Hungarian", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/huHU.ts" }, { "languageTag": "is-IS", "importName": "isIS", "localeName": "Icelandic", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/isIS.ts" }, { "languageTag": "it-IT", "importName": "itIT", "localeName": "Italian", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/itIT.ts" }, { "languageTag": "ja-JP", "importName": "jaJP", "localeName": "Japanese", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/jaJP.ts" }, { "languageTag": "kz-KZ", "importName": "kzKZ", "localeName": "Kazakh", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/kzKZ.ts" }, { "languageTag": "ko-KR", "importName": "koKR", "localeName": "Korean", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/koKR.ts" }, { "languageTag": "mk", "importName": "mk", "localeName": "Macedonian", - "missingKeysCount": 4, - "totalKeysCount": 41, + "missingKeysCount": 13, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/mk.ts" }, { "languageTag": "nb-NO", "importName": "nbNO", "localeName": "Norwegian (Bokmål)", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/nbNO.ts" }, { "languageTag": "fa-IR", "importName": "faIR", "localeName": "Persian", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/faIR.ts" }, { "languageTag": "pl-PL", "importName": "plPL", "localeName": "Polish", - "missingKeysCount": 13, - "totalKeysCount": 41, + "missingKeysCount": 22, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/plPL.ts" }, { "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ptBR.ts" }, { "languageTag": "ro-RO", "importName": "roRO", "localeName": "Romanian", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/roRO.ts" }, { "languageTag": "ru-RU", "importName": "ruRU", "localeName": "Russian", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", "importName": "skSK", "localeName": "Slovak", - "missingKeysCount": 6, - "totalKeysCount": 41, + "missingKeysCount": 15, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/skSK.ts" }, { "languageTag": "es-ES", "importName": "esES", "localeName": "Spanish", - "missingKeysCount": 4, - "totalKeysCount": 41, + "missingKeysCount": 13, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/esES.ts" }, { "languageTag": "sv-SE", "importName": "svSE", "localeName": "Swedish", - "missingKeysCount": 13, - "totalKeysCount": 41, + "missingKeysCount": 22, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/svSE.ts" }, { "languageTag": "tr-TR", "importName": "trTR", "localeName": "Turkish", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/trTR.ts" }, { "languageTag": "uk-UA", "importName": "ukUA", "localeName": "Ukrainian", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", "importName": "urPK", "localeName": "Urdu (Pakistan)", - "missingKeysCount": 13, - "totalKeysCount": 41, + "missingKeysCount": 22, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/urPK.ts" }, { "languageTag": "vi-VN", "importName": "viVN", "localeName": "Vietnamese", - "missingKeysCount": 5, - "totalKeysCount": 41, + "missingKeysCount": 14, + "totalKeysCount": 50, "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/viVN.ts" } ] diff --git a/docs/pages/x/api/date-pickers/localization-provider.json b/docs/pages/x/api/date-pickers/localization-provider.json index ce3bb20c5258..f7950552319e 100644 --- a/docs/pages/x/api/date-pickers/localization-provider.json +++ b/docs/pages/x/api/date-pickers/localization-provider.json @@ -11,7 +11,7 @@ "dateFormats": { "type": { "name": "shape", - "description": "{ dayOfMonth?: string, fullDate?: string, fullTime?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }" + "description": "{ dayOfMonth?: string, dayOfMonthFull?: string, fullDate?: string, fullTime?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }" } }, "dateLibInstance": { "type": { "name": "any" } }, diff --git a/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts b/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts index a24b3a69e7d1..331df5d30c12 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsBase/AdapterDateFnsBase.ts @@ -87,6 +87,7 @@ const defaultFormats: AdapterFormats = { month: 'LLLL', monthShort: 'MMM', dayOfMonth: 'd', + dayOfMonthFull: 'do', weekday: 'EEEE', weekdayShort: 'EEEEEE', hours24h: 'HH', @@ -250,4 +251,8 @@ export class AdapterDateFnsBase public formatNumber = (numberToFormat: string) => { return numberToFormat; }; + + public getDayOfWeek = (value: Date) => { + return value.getDay() + 1; + }; } diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts index 7b1e651d6c5d..df45f1b686fb 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts @@ -124,6 +124,7 @@ const defaultFormats: AdapterFormats = { month: 'LLLL', monthShort: 'MMM', dayOfMonth: 'd', + dayOfMonthFull: 'do', weekday: 'EEEE', weekdayShort: 'EEEEEE', hours24h: 'HH', @@ -501,6 +502,10 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter { const startDate = this.startOfYear(start); const endDate = this.endOfYear(end); diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index 667b7eb3ea64..81e32479c038 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -4,6 +4,7 @@ import weekOfYearPlugin from 'dayjs/plugin/weekOfYear'; import customParseFormatPlugin from 'dayjs/plugin/customParseFormat'; import localizedFormatPlugin from 'dayjs/plugin/localizedFormat'; import isBetweenPlugin from 'dayjs/plugin/isBetween'; +import advancedFormatPlugin from 'dayjs/plugin/advancedFormat'; import { FieldFormatTokenMap, MuiPickersAdapter, @@ -17,6 +18,7 @@ import { buildWarning } from '../internals/utils/warning'; defaultDayjs.extend(localizedFormatPlugin); defaultDayjs.extend(weekOfYearPlugin); defaultDayjs.extend(isBetweenPlugin); +defaultDayjs.extend(advancedFormatPlugin); type Constructor = (...args: Parameters) => Dayjs; @@ -73,6 +75,7 @@ const defaultFormats: AdapterFormats = { month: 'MMMM', monthShort: 'MMM', dayOfMonth: 'D', + dayOfMonthFull: 'Do', weekday: 'dddd', weekdayShort: 'dd', hours24h: 'HH', @@ -657,6 +660,10 @@ export class AdapterDayjs implements MuiPickersAdapter { return value.week(); }; + public getDayOfWeek(value: Dayjs): number { + return value.day() + 1; + } + public getYearRange = ([start, end]: [Dayjs, Dayjs]) => { const startDate = this.startOfYear(start); const endDate = this.endOfYear(end); diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts index 0118a0025be8..6dba4e0d7520 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts @@ -60,6 +60,9 @@ const defaultFormats: AdapterFormats = { month: 'LLLL', monthShort: 'MMM', dayOfMonth: 'd', + // Full day of the month format (i.e. 3rd) is not supported + // Falling back to regular format + dayOfMonthFull: 'd', weekday: 'cccc', weekdayShort: 'ccccc', hours24h: 'HH', @@ -479,6 +482,10 @@ export class AdapterLuxon implements MuiPickersAdapter { return value.localWeekNumber ?? value.weekNumber; }; + public getDayOfWeek = (value: DateTime) => { + return value.weekday; + }; + public getYearRange = ([start, end]: [DateTime, DateTime]) => { const startDate = this.startOfYear(start); const endDate = this.endOfYear(end); diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts index e7b610d466b6..6550ba949aa7 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts @@ -59,6 +59,7 @@ const defaultFormats: AdapterFormats = { month: 'MMMM', monthShort: 'MMM', dayOfMonth: 'D', + dayOfMonthFull: 'Do', weekday: 'dddd', weekdayShort: 'ddd', hours24h: 'HH', @@ -539,6 +540,10 @@ export class AdapterMoment implements MuiPickersAdapter { return value.week(); }; + public getDayOfWeek = (value: Moment) => { + return value.day() + 1; + }; + public getYearRange([start, end]: [Moment, Moment]) { const startDate = this.startOfYear(start); const endDate = this.endOfYear(end); diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts index a9f102f755b2..aabf13d31b85 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts @@ -50,6 +50,9 @@ const defaultFormats: AdapterFormats = { month: 'iMMMM', monthShort: 'iMMM', dayOfMonth: 'iD', + // Full day of the month format (i.e. 3rd) is not supported + // Falling back to regular format + dayOfMonthFull: 'iD', weekday: 'dddd', weekdayShort: 'ddd', hours24h: 'HH', diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts index 3ec4415dcb04..9daa0e5ee1c1 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts @@ -49,6 +49,9 @@ const defaultFormats: AdapterFormats = { month: 'jMMMM', monthShort: 'jMMM', dayOfMonth: 'jD', + // Full day of the month format (i.e. 3rd) is not supported + // Falling back to regular format + dayOfMonthFull: 'jD', weekday: 'dddd', weekdayShort: 'ddd', hours24h: 'HH', diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx index e7f74202614a..f58d480c0dfc 100644 --- a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx +++ b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx @@ -173,6 +173,7 @@ LocalizationProvider.propTypes = { */ dateFormats: PropTypes.shape({ dayOfMonth: PropTypes.string, + dayOfMonthFull: PropTypes.string, fullDate: PropTypes.string, fullTime: PropTypes.string, fullTime12h: PropTypes.string, diff --git a/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx b/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx index fc2194ab8424..2c670bfaf1fe 100644 --- a/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx +++ b/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx @@ -154,6 +154,8 @@ const PickersTextField = React.forwardRef(function PickersTextField( sectionListRef={sectionListRef} label={label} name={name} + role="group" + aria-labelledby={inputLabelId} {...InputProps} /> {helperText && ( diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index dab337d6ad4e..4d82ca28b4ad 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -229,6 +229,13 @@ export type FieldSectionsValueBoundaries = { }) => FieldSectionValueBoundaries; }; +export type FieldSectionsBoundaries = { + [SectionType in FieldSectionType]: { + minimum: number; + maximum: number; + }; +}; + export type FieldChangeHandler = ( value: TValue, context: FieldChangeHandlerContext, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts index 3f4450798c95..c12ffc2c1ab8 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.utils.ts @@ -611,7 +611,7 @@ export const getSectionsBoundaries = ( }), meridiem: () => ({ minimum: 0, - maximum: 0, + maximum: 1, }), empty: () => ({ minimum: 0, @@ -820,3 +820,74 @@ export const parseSelectedSections = ( return selectedSections; }; + +export const getSectionValueText = ( + section: FieldSection, + utils: MuiPickersAdapter, +): string | undefined => { + if (!section.value) { + return undefined; + } + switch (section.type) { + case 'month': { + if (section.contentType === 'digit') { + return utils.format(utils.setMonth(utils.date()!, Number(section.value) - 1), 'month'); + } + const parsedDate = utils.parse(section.value, section.format); + return parsedDate ? utils.format(parsedDate, 'month') : undefined; + } + case 'day': + return section.contentType === 'digit' + ? utils.format( + utils.setDate(utils.startOfYear(utils.date()!), Number(section.value)), + 'dayOfMonthFull', + ) + : section.value; + case 'weekDay': + // TODO: improve by providing the label of the week day + return undefined; + default: + return undefined; + } +}; + +export const getSectionValueNow = ( + section: FieldSection, + utils: MuiPickersAdapter, +): number | undefined => { + if (!section.value) { + return undefined; + } + switch (section.type) { + case 'weekDay': { + if (section.contentType === 'letter') { + // TODO: improve by resolving the week day number from a letter week day + return undefined; + } + return Number(section.value); + } + case 'meridiem': { + const parsedDate = utils.parse( + `01:00 ${section.value}`, + `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`, + ); + if (parsedDate) { + return utils.getHours(parsedDate) >= 12 ? 1 : 0; + } + return undefined; + } + case 'day': + return section.contentType === 'digit-with-letter' + ? parseInt(section.value, 10) + : Number(section.value); + case 'month': { + if (section.contentType === 'digit') { + return Number(section.value); + } + const parsedDate = utils.parse(section.value, section.format); + return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined; + } + default: + return section.contentType !== 'letter' ? Number(section.value) : undefined; + } +}; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts index c1fde47fb0f3..7e575fe269d7 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV7TextField.ts @@ -2,10 +2,16 @@ import * as React from 'react'; import useForkRef from '@mui/utils/useForkRef'; import useEventCallback from '@mui/utils/useEventCallback'; import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; -import { parseSelectedSections } from './useField.utils'; -import { UseFieldTextField, UseFieldTextFieldInteractions } from './useField.types'; +import useId from '@mui/utils/useId'; +import { getSectionValueNow, getSectionValueText, parseSelectedSections } from './useField.utils'; +import { + FieldSectionsBoundaries, + UseFieldTextField, + UseFieldTextFieldInteractions, +} from './useField.types'; import { getActiveElement } from '../../utils/utils'; import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList'; +import { useLocaleText, useUtils } from '../useUtils'; export const useFieldV7TextField: UseFieldTextField = (params) => { const { @@ -32,10 +38,14 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { updateValueFromValueStr, sectionOrder, areAllSectionsEmpty, + sectionsValueBoundaries, } = params; const sectionListRef = React.useRef(null); const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef); + const localeText = useLocaleText(); + const utils = useUtils(); + const id = useId(); const [focused, setFocused] = React.useState(false); @@ -389,9 +399,21 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { } }, [parsedSelectedSections, focused]); + const sectionBoundaries = React.useMemo(() => { + return state.sections.reduce((acc, next) => { + acc[next.type] = sectionsValueBoundaries[next.type]({ + currentDate: null, + contentType: next.contentType, + format: next.format, + }); + return acc; + }, {} as FieldSectionsBoundaries); + }, [sectionsValueBoundaries, state.sections]); + const isContainerEditable = parsedSelectedSections === 'all'; const elements = React.useMemo(() => { return state.sections.map((section, index) => { + const isEditable = !isContainerEditable && !disabled && !readOnly; return { container: { 'data-sectionindex': index, @@ -401,8 +423,21 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { tabIndex: isContainerEditable ? undefined : 0, contentEditable: !isContainerEditable && !disabled && !readOnly, role: 'spinbutton', - 'aria-label': section.placeholder, + id: `${id}-${section.type}`, + 'aria-labelledby': `${id}-${section.type}`, + 'aria-readonly': readOnly, + 'aria-valuenow': getSectionValueNow(section, utils), + 'aria-valuemin': sectionBoundaries[section.type].minimum, + 'aria-valuemax': sectionBoundaries[section.type].maximum, + 'aria-valuetext': section.value ? getSectionValueText(section, utils) : localeText.empty, + 'aria-label': localeText[section.type], 'aria-disabled': disabled, + spellCheck: isEditable ? false : undefined, + autoCapitalize: isEditable ? 'off' : undefined, + autoCorrect: isEditable ? 'off' : undefined, + [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable + ? 'next' + : undefined, children: section.value || section.placeholder, onInput: handleInputContentInput, onPaste: handleInputContentPaste, @@ -430,6 +465,10 @@ export const useFieldV7TextField: UseFieldTextField = (params) => { disabled, readOnly, isContainerEditable, + localeText, + utils, + sectionBoundaries, + id, ]); const handleValueStrChange = useEventCallback((event: React.ChangeEvent) => { diff --git a/packages/x-date-pickers/src/locales/beBY.ts b/packages/x-date-pickers/src/locales/beBY.ts index b4e042fd47ce..b178d543d92a 100644 --- a/packages/x-date-pickers/src/locales/beBY.ts +++ b/packages/x-date-pickers/src/locales/beBY.ts @@ -83,6 +83,19 @@ const beBYPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const beBY = getPickersLocalization(beBYPickers); diff --git a/packages/x-date-pickers/src/locales/caES.ts b/packages/x-date-pickers/src/locales/caES.ts index 3f3ca4cf160d..022b5b706f05 100644 --- a/packages/x-date-pickers/src/locales/caES.ts +++ b/packages/x-date-pickers/src/locales/caES.ts @@ -82,6 +82,19 @@ const caESPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const caES = getPickersLocalization(caESPickers); diff --git a/packages/x-date-pickers/src/locales/csCZ.ts b/packages/x-date-pickers/src/locales/csCZ.ts index 962238af26d4..50d61430a2b9 100644 --- a/packages/x-date-pickers/src/locales/csCZ.ts +++ b/packages/x-date-pickers/src/locales/csCZ.ts @@ -83,6 +83,19 @@ const csCZPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const csCZ = getPickersLocalization(csCZPickers); diff --git a/packages/x-date-pickers/src/locales/daDK.ts b/packages/x-date-pickers/src/locales/daDK.ts index b7b4ebc5bf06..4b6ad4eee2cb 100644 --- a/packages/x-date-pickers/src/locales/daDK.ts +++ b/packages/x-date-pickers/src/locales/daDK.ts @@ -83,6 +83,19 @@ const daDKPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const daDK = getPickersLocalization(daDKPickers); diff --git a/packages/x-date-pickers/src/locales/deDE.ts b/packages/x-date-pickers/src/locales/deDE.ts index cc5cfdd905d4..6f7cc84acad8 100644 --- a/packages/x-date-pickers/src/locales/deDE.ts +++ b/packages/x-date-pickers/src/locales/deDE.ts @@ -83,6 +83,19 @@ const deDEPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const deDE = getPickersLocalization(deDEPickers); diff --git a/packages/x-date-pickers/src/locales/elGR.ts b/packages/x-date-pickers/src/locales/elGR.ts index bfa5f5b2ff20..90143fdbff0d 100644 --- a/packages/x-date-pickers/src/locales/elGR.ts +++ b/packages/x-date-pickers/src/locales/elGR.ts @@ -82,6 +82,19 @@ const elGRPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const elGR = getPickersLocalization(elGRPickers); diff --git a/packages/x-date-pickers/src/locales/enUS.ts b/packages/x-date-pickers/src/locales/enUS.ts index aeee8fa05b36..39cf369f9a36 100644 --- a/packages/x-date-pickers/src/locales/enUS.ts +++ b/packages/x-date-pickers/src/locales/enUS.ts @@ -79,6 +79,19 @@ const enUSPickers: PickersLocaleText = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + year: 'Year', + month: 'Month', + day: 'Day', + weekDay: 'Week day', + hours: 'Hours', + minutes: 'Minutes', + seconds: 'Seconds', + meridiem: 'Meridiem', + + // Common + empty: 'Empty', }; export const DEFAULT_LOCALE = enUSPickers; diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts index 3db34bc0f21e..aa0c69a70c74 100644 --- a/packages/x-date-pickers/src/locales/esES.ts +++ b/packages/x-date-pickers/src/locales/esES.ts @@ -82,6 +82,19 @@ const esESPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const esES = getPickersLocalization(esESPickers); diff --git a/packages/x-date-pickers/src/locales/eu.ts b/packages/x-date-pickers/src/locales/eu.ts index d47d485454f9..c65709ab678e 100644 --- a/packages/x-date-pickers/src/locales/eu.ts +++ b/packages/x-date-pickers/src/locales/eu.ts @@ -82,6 +82,19 @@ const euPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const eu = getPickersLocalization(euPickers); diff --git a/packages/x-date-pickers/src/locales/faIR.ts b/packages/x-date-pickers/src/locales/faIR.ts index 8c32e68bb142..af88184b909d 100644 --- a/packages/x-date-pickers/src/locales/faIR.ts +++ b/packages/x-date-pickers/src/locales/faIR.ts @@ -82,6 +82,19 @@ const faIRPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const faIR = getPickersLocalization(faIRPickers); diff --git a/packages/x-date-pickers/src/locales/fiFI.ts b/packages/x-date-pickers/src/locales/fiFI.ts index 10beee1d1b67..7f0ebc0ac98d 100644 --- a/packages/x-date-pickers/src/locales/fiFI.ts +++ b/packages/x-date-pickers/src/locales/fiFI.ts @@ -82,6 +82,19 @@ const fiFIPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const fiFI = getPickersLocalization(fiFIPickers); diff --git a/packages/x-date-pickers/src/locales/frFR.ts b/packages/x-date-pickers/src/locales/frFR.ts index 6909264bec1a..a204a29377e4 100644 --- a/packages/x-date-pickers/src/locales/frFR.ts +++ b/packages/x-date-pickers/src/locales/frFR.ts @@ -82,6 +82,19 @@ const frFRPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const frFR = getPickersLocalization(frFRPickers); diff --git a/packages/x-date-pickers/src/locales/heIL.ts b/packages/x-date-pickers/src/locales/heIL.ts index 1eabc8eeceef..30903ddd79b6 100644 --- a/packages/x-date-pickers/src/locales/heIL.ts +++ b/packages/x-date-pickers/src/locales/heIL.ts @@ -82,6 +82,19 @@ const heILPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const heIL = getPickersLocalization(heILPickers); diff --git a/packages/x-date-pickers/src/locales/huHU.ts b/packages/x-date-pickers/src/locales/huHU.ts index 88f4f5a522bf..eeaf2448bd4a 100644 --- a/packages/x-date-pickers/src/locales/huHU.ts +++ b/packages/x-date-pickers/src/locales/huHU.ts @@ -83,6 +83,19 @@ const huHUPickers: Partial> = { fieldMinutesPlaceholder: () => 'pp', fieldSecondsPlaceholder: () => 'mm', fieldMeridiemPlaceholder: () => 'dd', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const huHU = getPickersLocalization(huHUPickers); diff --git a/packages/x-date-pickers/src/locales/isIS.ts b/packages/x-date-pickers/src/locales/isIS.ts index 339175152d72..9e6be431be08 100644 --- a/packages/x-date-pickers/src/locales/isIS.ts +++ b/packages/x-date-pickers/src/locales/isIS.ts @@ -82,6 +82,19 @@ const isISPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'ee', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const isIS = getPickersLocalization(isISPickers); diff --git a/packages/x-date-pickers/src/locales/itIT.ts b/packages/x-date-pickers/src/locales/itIT.ts index 1260b9feb4ea..f263d30bd621 100644 --- a/packages/x-date-pickers/src/locales/itIT.ts +++ b/packages/x-date-pickers/src/locales/itIT.ts @@ -82,6 +82,19 @@ const itITPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const itIT = getPickersLocalization(itITPickers); diff --git a/packages/x-date-pickers/src/locales/jaJP.ts b/packages/x-date-pickers/src/locales/jaJP.ts index 249e65eb9134..b75376e3059a 100644 --- a/packages/x-date-pickers/src/locales/jaJP.ts +++ b/packages/x-date-pickers/src/locales/jaJP.ts @@ -83,6 +83,19 @@ const jaJPPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const jaJP = getPickersLocalization(jaJPPickers); diff --git a/packages/x-date-pickers/src/locales/koKR.ts b/packages/x-date-pickers/src/locales/koKR.ts index c3fbdcb50fee..f393e71924a9 100644 --- a/packages/x-date-pickers/src/locales/koKR.ts +++ b/packages/x-date-pickers/src/locales/koKR.ts @@ -82,6 +82,19 @@ const koKRPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const koKR = getPickersLocalization(koKRPickers); diff --git a/packages/x-date-pickers/src/locales/kzKZ.ts b/packages/x-date-pickers/src/locales/kzKZ.ts index 69aab861f45a..eefb19d00bf7 100644 --- a/packages/x-date-pickers/src/locales/kzKZ.ts +++ b/packages/x-date-pickers/src/locales/kzKZ.ts @@ -83,6 +83,19 @@ const kzKZPickers: Partial> = { fieldMinutesPlaceholder: () => 'мм', fieldSecondsPlaceholder: () => 'сс', fieldMeridiemPlaceholder: () => '(т|к)', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const kzKZ = getPickersLocalization(kzKZPickers); diff --git a/packages/x-date-pickers/src/locales/mk.ts b/packages/x-date-pickers/src/locales/mk.ts index f30f668a7122..1a7eca9c3d21 100644 --- a/packages/x-date-pickers/src/locales/mk.ts +++ b/packages/x-date-pickers/src/locales/mk.ts @@ -76,6 +76,19 @@ const mkPickers: Partial> = { fieldMinutesPlaceholder: () => 'мм', fieldSecondsPlaceholder: () => 'сс', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const mk = getPickersLocalization(mkPickers); diff --git a/packages/x-date-pickers/src/locales/nbNO.ts b/packages/x-date-pickers/src/locales/nbNO.ts index 81a25f69e304..3ac5c0e73bbb 100644 --- a/packages/x-date-pickers/src/locales/nbNO.ts +++ b/packages/x-date-pickers/src/locales/nbNO.ts @@ -82,6 +82,19 @@ const nbNOPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const nbNO = getPickersLocalization(nbNOPickers); diff --git a/packages/x-date-pickers/src/locales/nlNL.ts b/packages/x-date-pickers/src/locales/nlNL.ts index e63611bb3aa2..1df2a019a7de 100644 --- a/packages/x-date-pickers/src/locales/nlNL.ts +++ b/packages/x-date-pickers/src/locales/nlNL.ts @@ -82,6 +82,19 @@ const nlNLPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const nlNL = getPickersLocalization(nlNLPickers); diff --git a/packages/x-date-pickers/src/locales/plPL.ts b/packages/x-date-pickers/src/locales/plPL.ts index bde5a22b7088..c338bbaee088 100644 --- a/packages/x-date-pickers/src/locales/plPL.ts +++ b/packages/x-date-pickers/src/locales/plPL.ts @@ -82,6 +82,19 @@ const plPLPickers: Partial> = { // fieldMinutesPlaceholder: () => 'mm', // fieldSecondsPlaceholder: () => 'ss', // fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const plPL = getPickersLocalization(plPLPickers); diff --git a/packages/x-date-pickers/src/locales/ptBR.ts b/packages/x-date-pickers/src/locales/ptBR.ts index 67523cad467b..14b54dd8ca79 100644 --- a/packages/x-date-pickers/src/locales/ptBR.ts +++ b/packages/x-date-pickers/src/locales/ptBR.ts @@ -82,6 +82,19 @@ const ptBRPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const ptBR = getPickersLocalization(ptBRPickers); diff --git a/packages/x-date-pickers/src/locales/roRO.ts b/packages/x-date-pickers/src/locales/roRO.ts index 41eb301cb659..1b84639c2b9d 100644 --- a/packages/x-date-pickers/src/locales/roRO.ts +++ b/packages/x-date-pickers/src/locales/roRO.ts @@ -83,6 +83,19 @@ const roROPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const roRO = getPickersLocalization(roROPickers); diff --git a/packages/x-date-pickers/src/locales/ruRU.ts b/packages/x-date-pickers/src/locales/ruRU.ts index c0845731efe4..a5adda58e764 100644 --- a/packages/x-date-pickers/src/locales/ruRU.ts +++ b/packages/x-date-pickers/src/locales/ruRU.ts @@ -83,6 +83,19 @@ const ruRUPickers: Partial> = { fieldMinutesPlaceholder: () => 'мм', fieldSecondsPlaceholder: () => 'сс', fieldMeridiemPlaceholder: () => '(д|п)п', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const ruRU = getPickersLocalization(ruRUPickers); diff --git a/packages/x-date-pickers/src/locales/skSK.ts b/packages/x-date-pickers/src/locales/skSK.ts index d5c1cff7a668..65bec28a0116 100644 --- a/packages/x-date-pickers/src/locales/skSK.ts +++ b/packages/x-date-pickers/src/locales/skSK.ts @@ -83,6 +83,19 @@ const skSKPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const skSK = getPickersLocalization(skSKPickers); diff --git a/packages/x-date-pickers/src/locales/svSE.ts b/packages/x-date-pickers/src/locales/svSE.ts index 8136f8f67c2b..e14f6f593404 100644 --- a/packages/x-date-pickers/src/locales/svSE.ts +++ b/packages/x-date-pickers/src/locales/svSE.ts @@ -82,6 +82,19 @@ const svSEPickers: Partial> = { // fieldMinutesPlaceholder: () => 'mm', // fieldSecondsPlaceholder: () => 'ss', // fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const svSE = getPickersLocalization(svSEPickers); diff --git a/packages/x-date-pickers/src/locales/trTR.ts b/packages/x-date-pickers/src/locales/trTR.ts index 2db7cfce826c..c2335b0677fd 100644 --- a/packages/x-date-pickers/src/locales/trTR.ts +++ b/packages/x-date-pickers/src/locales/trTR.ts @@ -82,6 +82,19 @@ const trTRPickers: Partial> = { fieldMinutesPlaceholder: () => 'dd', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const trTR = getPickersLocalization(trTRPickers); diff --git a/packages/x-date-pickers/src/locales/ukUA.ts b/packages/x-date-pickers/src/locales/ukUA.ts index 6dee1f7e64cd..bb53b6e26fcc 100644 --- a/packages/x-date-pickers/src/locales/ukUA.ts +++ b/packages/x-date-pickers/src/locales/ukUA.ts @@ -82,6 +82,19 @@ const ukUAPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const ukUA = getPickersLocalization(ukUAPickers); diff --git a/packages/x-date-pickers/src/locales/urPK.ts b/packages/x-date-pickers/src/locales/urPK.ts index 58f0aad2624c..125bd4fafbb9 100644 --- a/packages/x-date-pickers/src/locales/urPK.ts +++ b/packages/x-date-pickers/src/locales/urPK.ts @@ -82,6 +82,19 @@ const urPKPickers: Partial> = { // fieldMinutesPlaceholder: () => 'mm', // fieldSecondsPlaceholder: () => 'ss', // fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const urPK = getPickersLocalization(urPKPickers); diff --git a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts index 6e0aca44083b..9b6d77349cc8 100644 --- a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts +++ b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts @@ -95,6 +95,19 @@ export interface PickersComponentAgnosticLocaleText string; fieldSecondsPlaceholder: (params: { format: string }) => string; fieldMeridiemPlaceholder: (params: { format: string }) => string; + + // View names - reflects available `FieldSectionType` options + year: string; + month: string; + day: string; + weekDay: string; + hours: string; + minutes: string; + seconds: string; + meridiem: string; + + // Common + empty: string; } export interface PickersLocaleText diff --git a/packages/x-date-pickers/src/locales/viVN.ts b/packages/x-date-pickers/src/locales/viVN.ts index 4d7bc51c642e..8444dbc804c5 100644 --- a/packages/x-date-pickers/src/locales/viVN.ts +++ b/packages/x-date-pickers/src/locales/viVN.ts @@ -82,6 +82,19 @@ const viVNPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const viVN = getPickersLocalization(viVNPickers); diff --git a/packages/x-date-pickers/src/locales/zhCN.ts b/packages/x-date-pickers/src/locales/zhCN.ts index d9e39fb9813c..4780efcce179 100644 --- a/packages/x-date-pickers/src/locales/zhCN.ts +++ b/packages/x-date-pickers/src/locales/zhCN.ts @@ -80,6 +80,19 @@ const zhCNPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const zhCN = getPickersLocalization(zhCNPickers); diff --git a/packages/x-date-pickers/src/locales/zhHK.ts b/packages/x-date-pickers/src/locales/zhHK.ts index 61b4684d949b..dc1fc08f0792 100644 --- a/packages/x-date-pickers/src/locales/zhHK.ts +++ b/packages/x-date-pickers/src/locales/zhHK.ts @@ -80,6 +80,19 @@ const zhHKPickers: Partial> = { fieldMinutesPlaceholder: () => 'mm', fieldSecondsPlaceholder: () => 'ss', fieldMeridiemPlaceholder: () => 'aa', + + // View names + // year: 'Year', + // month: 'Month', + // day: 'Day', + // weekDay: 'Week day', + // hours: 'Hours', + // minutes: 'Minutes', + // seconds: 'Seconds', + // meridiem: 'Meridiem', + + // Common + // empty: 'Empty', }; export const zhHK = getPickersLocalization(zhHKPickers); diff --git a/packages/x-date-pickers/src/models/adapters.ts b/packages/x-date-pickers/src/models/adapters.ts index ae4cf04ddff2..68891ae41b0b 100644 --- a/packages/x-date-pickers/src/models/adapters.ts +++ b/packages/x-date-pickers/src/models/adapters.ts @@ -24,6 +24,11 @@ export interface AdapterFormats { * @example "1" */ dayOfMonth: string; + /** + * The day of the month with letters. + * @example "2nd" + */ + dayOfMonthFull: string; /** * The name of the day of the week. * @example "Wednesday" @@ -604,6 +609,14 @@ export interface MuiPickersAdapter * @returns {number} The number of the week of the given date. */ getWeekNumber(value: TDate): number; + /** + * Get the number of the day of the week of the given date. + * The value is 1-based, 1 - first day of the week, 7 - last day of the week. + * @template TDate + * @param {TDate} value The given date. + * @returns {number} The number of the day of the week of the given date. + */ + getDayOfWeek(value: TDate): number; /** * Create a list with all the years between the start and the end date. * @template TDate diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index 9fcdb80ddae6..fbd88d920e5b 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -13,6 +13,7 @@ import type { UseFieldResponse } from '../internals/hooks/useField'; import type { PickersTextFieldProps } from '../PickersTextField'; import { PickerValidDate } from './pickers'; +// Update PickersComponentAgnosticLocaleText -> viewNames when adding new entries export type FieldSectionType = | 'year' | 'month' diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index 04023da3cc04..c0c2000ff89d 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -540,9 +540,9 @@ async function initializeEnvironment( const input = page.getByRole('textbox', { includeHidden: true }); await page.locator(`.${pickersSectionListClasses.root}`).click(); - await page.getByRole(`spinbutton`, { name: 'MM' }).fill('04'); - await page.getByRole(`spinbutton`, { name: 'DD' }).fill('11'); - await page.getByRole(`spinbutton`, { name: 'YYYY' }).fill('2022'); + await page.getByRole(`spinbutton`, { name: 'Month' }).fill('04'); + await page.getByRole(`spinbutton`, { name: 'Day' }).fill('11'); + await page.getByRole(`spinbutton`, { name: 'Year' }).fill('2022'); expect(await input.inputValue()).to.equal('04/11/2022'); @@ -569,8 +569,12 @@ async function initializeEnvironment( }); it('should allow pasting a section', async () => { - // Only firefox is capable of reliably running this test in CI and headless browsers - if (browserType.name() !== 'firefox' && process.env.CIRCLECI) { + if ( + // Only firefox is capable of reliably running this test in CI and headless browsers + (browserType.name() !== 'firefox' && process.env.CIRCLECI) || + // chromium seems to fail when running this test locally in headless mode + (browserType.name() === 'chromium' && !process.env.CIRCLECI) + ) { return; } await renderFixture('DatePicker/BasicDesktopDatePicker'); @@ -580,9 +584,9 @@ async function initializeEnvironment( const isMac = platform() === 'darwin'; const modifier = isMac ? 'Meta' : 'Control'; - const monthSection = page.getByRole(`spinbutton`, { name: 'MM' }); - const daySection = page.getByRole(`spinbutton`, { name: 'DD' }); - const yearSection = page.getByRole(`spinbutton`, { name: 'YYYY' }); + const monthSection = page.getByRole(`spinbutton`, { name: 'Month' }); + const daySection = page.getByRole(`spinbutton`, { name: 'Day' }); + const yearSection = page.getByRole(`spinbutton`, { name: 'Year' }); await page.locator(`.${pickersSectionListClasses.root}`).click(); await monthSection.fill('04'); diff --git a/test/utils/pickers/describeValue/testControlledUnControlled.tsx b/test/utils/pickers/describeValue/testControlledUnControlled.tsx index 9ea50cd4a367..63477036c9b6 100644 --- a/test/utils/pickers/describeValue/testControlledUnControlled.tsx +++ b/test/utils/pickers/describeValue/testControlledUnControlled.tsx @@ -209,10 +209,7 @@ export const testControlledUnControlled: DescribeValueTestSuite = ( : { label: 'test relationship' }), }); - expect(screen.getByLabelText('test relationship', { selector: 'div' })).to.have.attribute( - 'role', - 'dialog', - ); + expect(screen.getByRole('dialog', { name: 'test relationship' })).not.to.equal(null); }); it('should have correct labelledby relationship without label and hidden toolbar but external props', () => { diff --git a/test/utils/setupPickers.js b/test/utils/setupPickers.js index 42984589a5f8..6876a822a287 100644 --- a/test/utils/setupPickers.js +++ b/test/utils/setupPickers.js @@ -1,9 +1,7 @@ import dayjs from 'dayjs'; -import advancedFormats from 'dayjs/plugin/advancedFormat'; import utc from 'dayjs/plugin/utc'; import timezone from 'dayjs/plugin/timezone'; import 'dayjs/locale/ru'; -dayjs.extend(advancedFormats); dayjs.extend(utc); dayjs.extend(timezone);