From ed71379202e4403f4018fcf38bb469196ab1fd55 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Wed, 27 Aug 2025 22:53:35 +0530 Subject: [PATCH 1/3] [pickers] Gracefully handle invalid values when AdapterDateFns is used --- .../x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts index 758a8fd66b53f..f22baefe2715d 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts @@ -120,10 +120,16 @@ export class AdapterDateFns }; public format = (value: Date, formatKey: keyof AdapterFormats): string => { + if (!isValid(value)) { + return ''; + } return this.formatByString(value, this.formats[formatKey]); }; public formatByString = (value: Date, formatString: string): string => { + if (!isValid(value)) { + return ''; + } return dateFnsFormat(value, formatString, { locale: this.locale }); }; From 8969d369da27eb2e9c6ef0e67c0535deca37e410 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 28 Aug 2025 11:59:38 +0530 Subject: [PATCH 2/3] avaoid calling adapter.format --- .../src/AdapterDateFns/AdapterDateFns.ts | 6 ------ .../useField/useFieldSectionContentProps.ts | 16 ++++++++-------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts index f22baefe2715d..758a8fd66b53f 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts @@ -120,16 +120,10 @@ export class AdapterDateFns }; public format = (value: Date, formatKey: keyof AdapterFormats): string => { - if (!isValid(value)) { - return ''; - } return this.formatByString(value, this.formats[formatKey]); }; public formatByString = (value: Date, formatString: string): string => { - if (!isValid(value)) { - return ''; - } return dateFnsFormat(value, formatString, { locale: this.locale }); }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts index 6aeb4009283c8..f14a6a22031ed 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts @@ -244,18 +244,18 @@ function getSectionValueText( switch (section.type) { case 'month': { if (section.contentType === 'digit') { - return adapter.format(adapter.setMonth(adapter.date(), Number(section.value) - 1), 'month'); + const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1); + return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : ''; } const parsedDate = adapter.parse(section.value, section.format); - return parsedDate ? adapter.format(parsedDate, 'month') : undefined; + return parsedDate && adapter.isValid(parsedDate) ? adapter.format(parsedDate, 'month') : undefined; } case 'day': - return section.contentType === 'digit' - ? adapter.format( - adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)), - 'dayOfMonthFull', - ) - : section.value; + if (section.contentType === 'digit') { + const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)); + return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : ''; + } + return section.value; case 'weekDay': // TODO: improve by providing the label of the week day return undefined; From ff865c4e554af8b459f9cbbf05a81d3a6d99e68a Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 28 Aug 2025 12:23:36 +0530 Subject: [PATCH 3/3] prettier --- .../hooks/useField/useFieldSectionContentProps.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts index f14a6a22031ed..ccb7b72bcef75 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldSectionContentProps.ts @@ -248,11 +248,16 @@ function getSectionValueText( return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : ''; } const parsedDate = adapter.parse(section.value, section.format); - return parsedDate && adapter.isValid(parsedDate) ? adapter.format(parsedDate, 'month') : undefined; + return parsedDate && adapter.isValid(parsedDate) + ? adapter.format(parsedDate, 'month') + : undefined; } case 'day': if (section.contentType === 'digit') { - const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value)); + const dateWithDay = adapter.setDate( + adapter.startOfYear(adapter.date()), + Number(section.value), + ); return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : ''; } return section.value;