From 257d0949d526dec48236cd9393620827a9dc1a87 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 14 Aug 2023 13:30:54 +0200 Subject: [PATCH 1/7] [pickers] Add referenceDate on picker components --- .../pages/x/api/date-pickers/date-picker.json | 4 +++ .../api/date-pickers/date-range-calendar.json | 4 +++ .../x/api/date-pickers/date-range-picker.json | 4 +++ .../x/api/date-pickers/date-time-picker.json | 4 +++ .../api/date-pickers/desktop-date-picker.json | 4 +++ .../desktop-date-range-picker.json | 4 +++ .../desktop-date-time-picker.json | 4 +++ .../api/date-pickers/desktop-time-picker.json | 4 +++ .../api/date-pickers/mobile-date-picker.json | 4 +++ .../mobile-date-range-picker.json | 4 +++ .../date-pickers/mobile-date-time-picker.json | 4 +++ .../api/date-pickers/mobile-time-picker.json | 4 +++ .../api/date-pickers/static-date-picker.json | 4 +++ .../static-date-range-picker.json | 4 +++ .../date-pickers/static-date-time-picker.json | 4 +++ .../api/date-pickers/static-time-picker.json | 4 +++ .../pages/x/api/date-pickers/time-picker.json | 4 +++ .../api-docs/date-pickers/date-picker.json | 5 ++++ .../date-pickers/date-range-calendar.json | 5 ++++ .../date-pickers/date-range-picker.json | 5 ++++ .../date-pickers/date-time-picker.json | 5 ++++ .../date-pickers/desktop-date-picker.json | 5 ++++ .../desktop-date-range-picker.json | 5 ++++ .../desktop-date-time-picker.json | 5 ++++ .../date-pickers/desktop-time-picker.json | 5 ++++ .../date-pickers/mobile-date-picker.json | 5 ++++ .../mobile-date-range-picker.json | 5 ++++ .../date-pickers/mobile-date-time-picker.json | 5 ++++ .../date-pickers/mobile-time-picker.json | 5 ++++ .../date-pickers/static-date-picker.json | 5 ++++ .../static-date-range-picker.json | 5 ++++ .../date-pickers/static-date-time-picker.json | 5 ++++ .../date-pickers/static-time-picker.json | 5 ++++ .../api-docs/date-pickers/time-picker.json | 5 ++++ .../DateRangeCalendar/DateRangeCalendar.tsx | 7 +++++ .../DateRangeCalendar.types.ts | 5 ++++ .../src/DateRangePicker/DateRangePicker.tsx | 5 ++++ .../DesktopDateRangePicker.tsx | 5 ++++ .../MobileDateRangePicker.tsx | 5 ++++ .../StaticDateRangePicker.tsx | 5 ++++ .../dateRangeViewRenderers.tsx | 2 ++ .../useDesktopRangePicker.types.ts | 2 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 2 +- .../useMobileRangePicker.types.ts | 2 +- .../src/DatePicker/DatePicker.tsx | 5 ++++ .../src/DateTimePicker/DateTimePicker.tsx | 5 ++++ .../DesktopDatePicker/DesktopDatePicker.tsx | 5 ++++ .../DesktopDateTimePicker.tsx | 5 ++++ .../DesktopTimePicker/DesktopTimePicker.tsx | 5 ++++ .../src/MobileDatePicker/MobileDatePicker.tsx | 5 ++++ .../MobileDateTimePicker.tsx | 5 ++++ .../src/MobileTimePicker/MobileTimePicker.tsx | 5 ++++ .../src/StaticDatePicker/StaticDatePicker.tsx | 5 ++++ .../StaticDateTimePicker.tsx | 5 ++++ .../src/StaticTimePicker/StaticTimePicker.tsx | 5 ++++ .../src/TimePicker/TimePicker.tsx | 5 ++++ .../dateTimeViewRenderers.tsx | 3 ++ .../dateViewRenderers/dateViewRenderers.tsx | 2 ++ .../useDesktopPicker.types.ts | 4 +-- .../useMobilePicker/useMobilePicker.types.ts | 4 +-- .../internals/hooks/usePicker/usePicker.ts | 10 +++++-- .../hooks/usePicker/usePicker.types.ts | 14 ++++++---- .../hooks/usePicker/usePickerViews.ts | 28 +++++++++++++++---- .../useStaticPicker/useStaticPicker.types.ts | 2 +- .../models/props/basePickerProps.tsx | 4 +-- .../timeViewRenderers/timeViewRenderers.tsx | 4 +++ 66 files changed, 304 insertions(+), 24 deletions(-) diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index fe0472897754e..2ca594cb1d682 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -110,6 +110,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index da64f1212e2dd..bdf0b2628862b 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -71,6 +71,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => \"...\"", diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index 5982216992944..68d37a24eb6c7 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -111,6 +111,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => \"...\"", diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 44b8737b9125c..2271450c32905 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -118,6 +118,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index 8f60eb773e090..4eb85dc39295d 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -106,6 +106,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index 3260661c5445e..224a94656f08b 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -107,6 +107,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => \"...\"", diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index e8838d1273d0a..99d98a0279bfe 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -114,6 +114,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index 16307403ca0ba..292d3b5e91204 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -80,6 +80,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "selectedSections": { "type": { "name": "union", diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index b9ec9c5a0dc4a..81fc8f3accf14 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -106,6 +106,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 734b41d4068e7..17a1320bc5f06 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -107,6 +107,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => \"...\"", diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index 8805edd45899e..ac76b20bb8401 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -114,6 +114,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index ebc3633ecbc03..e39296bc5d491 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -80,6 +80,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "selectedSections": { "type": { "name": "union", diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index b8b4fd598b8fc..2600aadd8f021 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -91,6 +91,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 75136c63039ac..545d1c2bf6ac4 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -92,6 +92,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => \"...\"", diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index e36d59337ece8..ed565aad7d4df 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -99,6 +99,10 @@ "type": { "name": "bool" }, "default": "typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "renderLoading": { "type": { "name": "func" }, "default": "() => ...", diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index 3ad0a484c5a6c..c7e477fd02ea9 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -65,6 +65,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "shouldDisableClock": { "type": { "name": "func" }, "deprecated": true, diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index cf410a934a6ea..ffa12ea2c924e 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -84,6 +84,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "referenceDate": { + "type": { "name": "any" }, + "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + }, "selectedSections": { "type": { "name": "union", diff --git a/docs/translations/api-docs/date-pickers/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker.json index 08e0796566df8..46e9a9361fdb0 100644 --- a/docs/translations/api-docs/date-pickers/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker.json @@ -196,6 +196,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar.json index b7290928650e1..2f148081f39f5 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar.json @@ -137,6 +137,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker.json index 5a75774449ca5..ca1304df36aea 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker.json @@ -210,6 +210,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker.json index 4ce7d283a9607..2753bf6545ae0 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker.json @@ -236,6 +236,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker.json index f62ff6bdf810e..ffc3067f19eba 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker.json @@ -191,6 +191,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json index 19fd11916e1b4..54a88148246d8 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json @@ -205,6 +205,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json index 6f4b58b6ba7ef..5696b50be4802 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json @@ -231,6 +231,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/desktop-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-time-picker.json index 47506215eb051..1ad1913a46969 100644 --- a/docs/translations/api-docs/date-pickers/desktop-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-time-picker.json @@ -158,6 +158,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "selectedSections": { "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker.json index 71ac2d8a36c1c..8ac27206b45f7 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker.json @@ -191,6 +191,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json index e9f72fa6d2c25..a3bb719435249 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json @@ -205,6 +205,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker.json index 917dc66ffcef2..1bcbe884bae74 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker.json @@ -231,6 +231,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/mobile-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-time-picker.json index a1b597fcf4cba..2de821146279f 100644 --- a/docs/translations/api-docs/date-pickers/mobile-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-time-picker.json @@ -158,6 +158,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "selectedSections": { "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker.json index e36d2a320cbf8..7da819f73d603 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker.json @@ -155,6 +155,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker.json index 2b3a69cf4d9e2..9582e1cbb49b8 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker.json @@ -165,6 +165,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker.json index 9e018f94576d7..ebfa8492209b5 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker.json @@ -195,6 +195,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "renderLoading": { "description": "Component displaying when passed loading true.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/static-time-picker.json b/docs/translations/api-docs/date-pickers/static-time-picker.json index 6003f26eecbde..0afebfab93392 100644 --- a/docs/translations/api-docs/date-pickers/static-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-time-picker.json @@ -122,6 +122,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "shouldDisableClock": { "description": "Disable specific clock time.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/time-picker.json b/docs/translations/api-docs/date-pickers/time-picker.json index c8695aaf547df..4ac31ddd7e69f 100644 --- a/docs/translations/api-docs/date-pickers/time-picker.json +++ b/docs/translations/api-docs/date-pickers/time-picker.json @@ -163,6 +163,11 @@ "deprecated": "", "typeDescriptions": {} }, + "referenceDate": { + "description": "The date used to generate the new value when both value and defaultValue are empty.", + "deprecated": "", + "typeDescriptions": {} + }, "selectedSections": { "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.", "deprecated": "", diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index 58b95bea3027e..3a80c106aba91 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -167,6 +167,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( const { value: valueProp, defaultValue, + referenceDate, onChange, className, disableFuture, @@ -312,6 +313,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( onMonthSwitchingAnimationEnd, } = useCalendarState({ value: value[0] || value[1], + referenceDate, defaultCalendarMonth, disableFuture, disablePast, @@ -733,6 +735,11 @@ DateRangeCalendar.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts index c21f29e54faec..898cd92aebe9e 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -117,6 +117,11 @@ export interface DateRangeCalendarProps * Used when the component is not controlled. */ defaultValue?: DateRange; + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate?: TDate; /** * Callback fired when the value changes. * @template TDate diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index c2bc901271f7b..884bc16704635 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -255,6 +255,11 @@ DateRangePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 20eb33dce5066..80d374273507e 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -285,6 +285,11 @@ DesktopDateRangePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 760410ba22547..3b4ce5a425ab8 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -285,6 +285,11 @@ MobileDateRangePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 90a88522972dd..40b68b9dfb019 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -233,6 +233,11 @@ StaticDateRangePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx index 4a6869ea23252..8722b3cf2fdce 100644 --- a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx +++ b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx @@ -16,6 +16,7 @@ export interface DateRangeViewRendererProps({ value, defaultValue, + referenceDate, onChange, className, classes, @@ -54,6 +55,7 @@ export const renderDateRangeViewCalendar = ({ , + TExternalProps extends UsePickerViewsProps, > extends DesktopRangeOnlyPickerProps, BasePickerProps< DateRange, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index fc84c056a2540..50ef1976536a6 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -56,7 +56,7 @@ export interface RangePickerFieldSlotsComponentsProps { BaseMultiInputFieldProps, TDate, RangeFieldSection, unknown> >, {}, - UsePickerProps, any, RangeFieldSection, any, any, any> + UsePickerProps, TDate, any, RangeFieldSection, any, any, any> >; fieldRoot?: SlotComponentProps>; fieldSeparator?: SlotComponentProps>; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts index 2ba30b71723c4..0d48aa056e5c2 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.ts @@ -47,7 +47,7 @@ export interface UseMobileRangePickerProps< TDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, > extends MobileRangeOnlyPickerProps, BasePickerProps< DateRange, diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index c752e4224db89..b1e43aa7e06e0 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -245,6 +245,11 @@ DatePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index dffb4379871b7..387d24be461af 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -283,6 +283,11 @@ DateTimePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index 6f2e49a64b66d..77dec0bb0f581 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -285,6 +285,11 @@ DesktopDatePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 94d7a5f8311f1..0b6be49dc9e1d 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -365,6 +365,11 @@ DesktopDateTimePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 93bc2b6297c94..7dacdc7952d3d 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -291,6 +291,11 @@ DesktopTimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * The currently selected sections. * This prop accept four formats: diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index 1bfe059f21621..d3a2f7ada2827 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -281,6 +281,11 @@ MobileDatePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 795f010008726..58b081fad35cd 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -333,6 +333,11 @@ MobileDateTimePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 8730507fc19a2..16b4bb7220d57 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -255,6 +255,11 @@ MobileTimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * The currently selected sections. * This prop accept four formats: diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index 724de5b2481f8..baf35f2deba4e 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -224,6 +224,11 @@ StaticDatePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 0d16d742395a5..23ee5bc56308e 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -274,6 +274,11 @@ StaticDateTimePicker.propTypes = { * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index 0c2a8bd11ba6e..7e9e5df71c7f2 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -195,6 +195,11 @@ StaticTimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * Disable specific clock time. * @param {number} clockValue The value to check. diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index fc6144754b838..d7d361e68397d 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -213,6 +213,11 @@ TimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate: PropTypes.any, /** * The currently selected sections. * This prop accept four formats: diff --git a/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx b/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx index 63fef77db26ea..563d5bc45d263 100644 --- a/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateTimeViewRenderers/dateTimeViewRenderers.tsx @@ -42,6 +42,7 @@ export const renderDesktopDateTimeView = ({ onFocusedViewChange, value, defaultValue, + referenceDate, onChange, className, classes, @@ -100,6 +101,7 @@ export const renderDesktopDateTimeView = ({ onFocusedViewChange={onFocusedViewChange} value={value} defaultValue={defaultValue} + referenceDate={referenceDate} onChange={onChange} className={className} classes={classes} @@ -144,6 +146,7 @@ export const renderDesktopDateTimeView = ({ views={views.filter(isInternalTimeView)} value={value} defaultValue={defaultValue} + referenceDate={referenceDate} onChange={onChange} className={className} classes={classes} diff --git a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx index 267d5330dd4e9..a4cb9e7cb9ce1 100644 --- a/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx +++ b/packages/x-date-pickers/src/dateViewRenderers/dateViewRenderers.tsx @@ -23,6 +23,7 @@ export const renderDateViewCalendar = ({ onFocusedViewChange, value, defaultValue, + referenceDate, onChange, className, classes, @@ -64,6 +65,7 @@ export const renderDateViewCalendar = ({ onFocusedViewChange={onFocusedViewChange} value={value} defaultValue={defaultValue} + referenceDate={referenceDate} onChange={onChange} className={className} classes={classes} diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index c179b8d967713..c6410882e8208 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -70,7 +70,7 @@ export interface ExportedUseDesktopPickerSlotsComponentsProps< field?: SlotComponentProps< React.ElementType>, {}, - UsePickerProps + UsePickerProps >; textField?: SlotComponentProps>; inputAdornment?: Partial; @@ -97,7 +97,7 @@ export interface UseDesktopPickerProps< TDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, > extends BasePickerProps, DesktopOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index c3094e57cd0ca..21a858ce3b1f9 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -45,7 +45,7 @@ export interface ExportedUseMobilePickerSlotsComponentsProps< field?: SlotComponentProps< React.ElementType>, {}, - UsePickerProps + UsePickerProps >; textField?: SlotComponentProps>; } @@ -66,7 +66,7 @@ export interface UseMobilePickerProps< TDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, > extends BasePickerProps, MobileOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts index 3e53d8b8fc1cd..089d14164888c 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts @@ -18,7 +18,7 @@ export const usePicker = < TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, - TExternalProps extends UsePickerProps, + TExternalProps extends UsePickerProps, TAdditionalProps extends {}, >({ props, @@ -50,7 +50,13 @@ export const usePicker = < validator, }); - const pickerViewsResponse = usePickerViews({ + const pickerViewsResponse = usePickerViews< + TValue, + TDate, + TView, + TExternalProps, + TAdditionalProps + >({ props, inputRef, additionalViewProps, diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts index 0c00c3c7b8a29..703940f317118 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts @@ -19,23 +19,25 @@ import { DateOrTimeViewWithMeridiem } from '../../models'; */ export interface UsePickerBaseProps< TValue, + TDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends UsePickerValueBaseProps, - UsePickerViewsBaseProps, + UsePickerViewsBaseProps, UsePickerLayoutProps {} export interface UsePickerProps< TValue, + TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends UsePickerValueProps, - UsePickerViewsProps, + UsePickerViewsProps, UsePickerLayoutProps {} export interface UsePickerParams< @@ -43,14 +45,14 @@ export interface UsePickerParams< TDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, - TExternalProps extends UsePickerProps, + TExternalProps extends UsePickerProps, TAdditionalProps extends {}, > extends Pick< UsePickerValueParams, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator' >, Pick< - UsePickerViewParams, + UsePickerViewParams, 'additionalViewProps' | 'inputRef' | 'autoFocusView' > { props: TExternalProps; diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index fc8f84224063e..3a2fd931fbec4 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -10,7 +10,7 @@ import { DateOrTimeViewWithMeridiem } from '../../models'; import { TimezoneProps } from '../../../models'; interface PickerViewsRendererBaseExternalProps - extends Omit, 'openTo' | 'viewRenderers'> {} + extends Omit, 'openTo' | 'viewRenderers'> {} export type PickerViewsRendererProps< TValue, @@ -49,8 +49,9 @@ export type PickerViewRendererLookup< */ export interface UsePickerViewsBaseProps< TValue, + TDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, > extends Omit, 'onChange' | 'onFocusedViewChange' | 'focusedView'>, TimezoneProps { @@ -64,6 +65,11 @@ export interface UsePickerViewsBaseProps< * If `undefined`, internally defined view will be the used. */ viewRenderers: PickerViewRendererLookup; + /** + * The date used to generate the new value when both `value` and `defaultValue` are empty. + * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + */ + referenceDate?: TDate; } /** @@ -82,10 +88,11 @@ export interface UsePickerViewsNonStaticProps { */ export interface UsePickerViewsProps< TValue, + TDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerViewsBaseProps, +> extends UsePickerViewsBaseProps, UsePickerViewsNonStaticProps { className?: string; sx?: SxProps; @@ -93,8 +100,15 @@ export interface UsePickerViewsProps< export interface UsePickerViewParams< TValue, + TDate, TView extends DateOrTimeViewWithMeridiem, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps< + TValue, + TDate, + TView, + TExternalProps, + TAdditionalProps + >, TAdditionalProps extends {}, > { props: TExternalProps; @@ -129,8 +143,9 @@ export interface UsePickerViewsLayoutResponse, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, >({ props, @@ -140,6 +155,7 @@ export const usePickerViews = < autoFocusView, }: UsePickerViewParams< TValue, + TDate, TView, TExternalProps, TAdditionalProps diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts index 0abec5acb2703..9663c2261749e 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.types.ts @@ -40,7 +40,7 @@ export interface UseStaticPickerProps< TDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, > extends BasePickerProps, StaticOnlyPickerProps { /** diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx index 1fc745944af22..09d18619473d9 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -15,9 +15,9 @@ export interface BasePickerProps< TDate, TView extends DateOrTimeViewWithMeridiem, TError, - TExternalProps extends UsePickerViewsProps, + TExternalProps extends UsePickerViewsProps, TAdditionalProps extends {}, -> extends UsePickerBaseProps { +> extends UsePickerBaseProps { /** * Class name applied to the root element. */ diff --git a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx index 7d9a171827d74..53fb323c17058 100644 --- a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx +++ b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx @@ -28,6 +28,7 @@ export const renderTimeViewClock = ({ views, value, defaultValue, + referenceDate, onChange, className, classes, @@ -60,6 +61,7 @@ export const renderTimeViewClock = ({ views={views.filter(isTimeView)} value={value} defaultValue={defaultValue} + referenceDate={referenceDate} onChange={onChange} className={className} classes={classes} @@ -94,6 +96,7 @@ export const renderDigitalClockTimeView = ({ views, value, defaultValue, + referenceDate, onChange, className, classes, @@ -129,6 +132,7 @@ export const renderDigitalClockTimeView = ({ views={views.filter(isTimeView)} value={value} defaultValue={defaultValue} + referenceDate={referenceDate} onChange={onChange} className={className} classes={classes} From 9e5e0a80990aeac54963fc583769265f11b458df Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 22 Aug 2023 12:59:09 +0200 Subject: [PATCH 2/7] Add doc in Base Concept --- .../ReferenceDateDefaultBehavior.js | 21 +++++++++++++++ .../ReferenceDateDefaultBehavior.tsx | 21 +++++++++++++++ .../ReferenceDateDefaultBehavior.tsx.preview | 6 +++++ .../ReferenceDateExplicitDateTimePicker.js | 26 +++++++++++++++++++ .../ReferenceDateExplicitDateTimePicker.tsx | 26 +++++++++++++++++++ ...enceDateExplicitDateTimePicker.tsx.preview | 4 +++ .../ReferenceDateExplicitTimePicker.js | 26 +++++++++++++++++++ .../ReferenceDateExplicitTimePicker.tsx | 26 +++++++++++++++++++ ...eferenceDateExplicitTimePicker.tsx.preview | 4 +++ .../base-concepts/ReferenceDateUsingValue.js | 16 ++++++++++++ .../base-concepts/ReferenceDateUsingValue.tsx | 16 ++++++++++++ .../ReferenceDateUsingValue.tsx.preview | 1 + .../base-concepts/base-concepts.md | 23 +++++++++++++++- .../timeViewRenderers/timeViewRenderers.tsx | 2 ++ 14 files changed, 217 insertions(+), 1 deletion(-) create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.js create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.js create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx create mode 100644 docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js new file mode 100644 index 0000000000000..9c7ae133b4027 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js @@ -0,0 +1,21 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; + +export default function ReferenceDateDefaultBehavior() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx new file mode 100644 index 0000000000000..9c7ae133b4027 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; + +export default function ReferenceDateDefaultBehavior() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview new file mode 100644 index 0000000000000..edb3c38505113 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js new file mode 100644 index 0000000000000..623cd4d561ad9 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; + +export default function ReferenceDateExplicitDateTimePicker() { + const [value, setValue] = React.useState(null); + + return ( + + + + + Stored value: {value == null ? 'null' : value.format()} + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx new file mode 100644 index 0000000000000..4101557d7e927 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import dayjs, { Dayjs } from 'dayjs'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; + +export default function ReferenceDateExplicitDateTimePicker() { + const [value, setValue] = React.useState(null); + + return ( + + + + + Stored value: {value == null ? 'null' : value.format()} + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview new file mode 100644 index 0000000000000..638bbf0b1b786 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview @@ -0,0 +1,4 @@ + + + Stored value: {value == null ? 'null' : value.format()} + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.js b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.js new file mode 100644 index 0000000000000..a396e00792a7b --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { TimePicker } from '@mui/x-date-pickers/TimePicker'; + +export default function ReferenceDateExplicitTimePicker() { + const [value, setValue] = React.useState(null); + + return ( + + + + + Stored value: {value == null ? 'null' : value.format()} + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx new file mode 100644 index 0000000000000..99212c623a20e --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import dayjs, { Dayjs } from 'dayjs'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { TimePicker } from '@mui/x-date-pickers/TimePicker'; + +export default function ReferenceDateExplicitTimePicker() { + const [value, setValue] = React.useState(null); + + return ( + + + + + Stored value: {value == null ? 'null' : value.format()} + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview new file mode 100644 index 0000000000000..e9f0b9228f149 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview @@ -0,0 +1,4 @@ + + + Stored value: {value == null ? 'null' : value.format()} + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.js b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.js new file mode 100644 index 0000000000000..293d28d066a8e --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +export default function ReferenceDateUsingValue() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx new file mode 100644 index 0000000000000..293d28d066a8e --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +export default function ReferenceDateUsingValue() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview new file mode 100644 index 0000000000000..c596924539d96 --- /dev/null +++ b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md index 6cea81390c54f..2a5f10a8acc5d 100644 --- a/docs/data/date-pickers/base-concepts/base-concepts.md +++ b/docs/data/date-pickers/base-concepts/base-concepts.md @@ -81,9 +81,30 @@ There are many components available, each fitting specific use cases. Use the fo {{"demo": "ComponentExplorerNoSnap.js", "hideToolbar": true}} +## Reference date when no value is defined + +If `value` or `defaultValue` contains a valid date, this date will be used to initialize the rendered component. + +In the demo below, you can see that the calendar is set to April 2022 on mount: + +{{"demo": "ReferenceDateUsingValue.js"}} + +When `value` and `defaultValue` contains no valid date, the component will try to find a reference date that passed the validation to initialize its rendering: + +{{"demo": "ReferenceDateDefaultBehavior.js"}} + +You can override this date using the `referenceDate` prop. + +{{"demo": "ReferenceDateExplicitDateTimePicker.js"}} + +This can also be useful to set the part of the value that will not be selectable in the component. +For example, in a Time Picker, it allows you to choose the date of your value: + +{{"demo": "ReferenceDateExplicitTimePicker.js"}} + ## Accessibility -Both `Desktop` and `Mobile` Date and Time Pickers are using `role="dialog"` to display their interactive view parts and thus they should follow [Modal accessibility guidelines](/material-ui/react-modal/#accessibility). +Both `Desktop` and `Mobile` Date and Time Pickers are using `role="dialog"` to display their interactive view parts, and thus they should follow [Modal accessibility guidelines](/material-ui/react-modal/#accessibility). This behavior is automated as much as possible, ensuring that the Date and Time Pickers are accessible in most cases. A correct `aria-labelledby` value is assigned to the dialog component based on the following rules: diff --git a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx index 53fb323c17058..aef235e1a4c72 100644 --- a/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx +++ b/packages/x-date-pickers/src/timeViewRenderers/timeViewRenderers.tsx @@ -167,6 +167,7 @@ export const renderMultiSectionDigitalClockTimeView = ({ views, value, defaultValue, + referenceDate, onChange, className, classes, @@ -199,6 +200,7 @@ export const renderMultiSectionDigitalClockTimeView = ({ views={views.filter(isTimeView)} value={value} defaultValue={defaultValue} + referenceDate={referenceDate} onChange={onChange} className={className} classes={classes} From 2ae9f99101ee4f1dab878b431ae0948067a2a603 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 22 Aug 2023 13:05:22 +0200 Subject: [PATCH 3/7] Fix --- .../ReferenceDateDefaultBehavior.tsx.preview | 4 ++-- .../ReferenceDateExplicitDateTimePicker.tsx.preview | 8 ++++++-- .../ReferenceDateExplicitTimePicker.tsx.preview | 8 ++++++-- docs/pages/x/api/date-pickers/desktop-time-picker.json | 4 ++++ docs/pages/x/api/date-pickers/mobile-time-picker.json | 4 ++++ docs/pages/x/api/date-pickers/static-time-picker.json | 4 ++++ docs/pages/x/api/date-pickers/time-picker.json | 4 ++++ .../api-docs/date-pickers/desktop-time-picker.json | 5 +++++ .../api-docs/date-pickers/mobile-time-picker.json | 5 +++++ .../api-docs/date-pickers/static-time-picker.json | 5 +++++ docs/translations/api-docs/date-pickers/time-picker.json | 5 +++++ .../src/DesktopTimePicker/DesktopTimePicker.tsx | 5 +++++ .../src/MobileTimePicker/MobileTimePicker.tsx | 5 +++++ .../src/StaticTimePicker/StaticTimePicker.tsx | 5 +++++ packages/x-date-pickers/src/TimePicker/TimePicker.tsx | 5 +++++ .../src/internals/hooks/usePicker/usePickerViews.ts | 5 +++++ 16 files changed, 75 insertions(+), 6 deletions(-) diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview index edb3c38505113..ccc2cf97ff698 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview @@ -1,6 +1,6 @@ - + - + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview index 638bbf0b1b786..79f365e8b905a 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.tsx.preview @@ -1,4 +1,8 @@ - + - Stored value: {value == null ? 'null' : value.format()} + Stored value: {value == null ? 'null' : value.format()} \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview index e9f0b9228f149..c903a48ae1d9f 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitTimePicker.tsx.preview @@ -1,4 +1,8 @@ - + - Stored value: {value == null ? 'null' : value.format()} + Stored value: {value == null ? 'null' : value.format()} \ No newline at end of file diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index 3cd1a2f3cdbba..83368963cc027 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -80,6 +80,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "reduceAnimations": { + "type": { "name": "bool" }, + "default": "`@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" + }, "referenceDate": { "type": { "name": "any" }, "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index e39296bc5d491..bfabb25ef1bef 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -80,6 +80,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "reduceAnimations": { + "type": { "name": "bool" }, + "default": "`@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" + }, "referenceDate": { "type": { "name": "any" }, "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index c7e477fd02ea9..f561c186e7b81 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -65,6 +65,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "reduceAnimations": { + "type": { "name": "bool" }, + "default": "`@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" + }, "referenceDate": { "type": { "name": "any" }, "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index ebeddc6b94e90..9e697aafe22f4 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -84,6 +84,10 @@ "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, + "reduceAnimations": { + "type": { "name": "bool" }, + "default": "`@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)" + }, "referenceDate": { "type": { "name": "any" }, "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." diff --git a/docs/translations/api-docs/date-pickers/desktop-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-time-picker.json index 1ad1913a46969..0b93f76ff1c65 100644 --- a/docs/translations/api-docs/date-pickers/desktop-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-time-picker.json @@ -158,6 +158,11 @@ "deprecated": "", "typeDescriptions": {} }, + "reduceAnimations": { + "description": "If true, disable heavy animations.", + "deprecated": "", + "typeDescriptions": {} + }, "referenceDate": { "description": "The date used to generate the new value when both value and defaultValue are empty.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/mobile-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-time-picker.json index 2de821146279f..a85c039dbef01 100644 --- a/docs/translations/api-docs/date-pickers/mobile-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-time-picker.json @@ -158,6 +158,11 @@ "deprecated": "", "typeDescriptions": {} }, + "reduceAnimations": { + "description": "If true, disable heavy animations.", + "deprecated": "", + "typeDescriptions": {} + }, "referenceDate": { "description": "The date used to generate the new value when both value and defaultValue are empty.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/static-time-picker.json b/docs/translations/api-docs/date-pickers/static-time-picker.json index 0afebfab93392..485072c6bba9b 100644 --- a/docs/translations/api-docs/date-pickers/static-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-time-picker.json @@ -122,6 +122,11 @@ "deprecated": "", "typeDescriptions": {} }, + "reduceAnimations": { + "description": "If true, disable heavy animations.", + "deprecated": "", + "typeDescriptions": {} + }, "referenceDate": { "description": "The date used to generate the new value when both value and defaultValue are empty.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/time-picker.json b/docs/translations/api-docs/date-pickers/time-picker.json index 4ac31ddd7e69f..5f589dbaa437f 100644 --- a/docs/translations/api-docs/date-pickers/time-picker.json +++ b/docs/translations/api-docs/date-pickers/time-picker.json @@ -163,6 +163,11 @@ "deprecated": "", "typeDescriptions": {} }, + "reduceAnimations": { + "description": "If true, disable heavy animations.", + "deprecated": "", + "typeDescriptions": {} + }, "referenceDate": { "description": "The date used to generate the new value when both value and defaultValue are empty.", "deprecated": "", diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 7dacdc7952d3d..f91d2da56edf6 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -291,6 +291,11 @@ DesktopTimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * If `true`, disable heavy animations. + * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) + */ + reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 16b4bb7220d57..b22e3db0f5ffe 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -255,6 +255,11 @@ MobileTimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * If `true`, disable heavy animations. + * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) + */ + reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index 7e9e5df71c7f2..a5b8af067f24c 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -195,6 +195,11 @@ StaticTimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * If `true`, disable heavy animations. + * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) + */ + reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index d7d361e68397d..8af97b5888034 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -213,6 +213,11 @@ TimePicker.propTypes = { */ orientation: PropTypes.oneOf(['landscape', 'portrait']), readOnly: PropTypes.bool, + /** + * If `true`, disable heavy animations. + * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) + */ + reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index 3a2fd931fbec4..6094fcaf462d9 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -65,6 +65,11 @@ export interface UsePickerViewsBaseProps< * If `undefined`, internally defined view will be the used. */ viewRenderers: PickerViewRendererLookup; + /** + * If `true`, disable heavy animations. + * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) + */ + reduceAnimations?: boolean; /** * The date used to generate the new value when both `value` and `defaultValue` are empty. * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. From 4ebdc5db47d3bffdba81f5e551109e290f31ade7 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 23 Aug 2023 10:38:43 +0200 Subject: [PATCH 4/7] Add DateCalendar doc --- .../date-pickers/base-concepts/base-concepts.md | 4 ++-- .../date-calendar/DateCalendarReferenceDate.js | 16 ++++++++++++++++ .../date-calendar/DateCalendarReferenceDate.tsx | 16 ++++++++++++++++ .../DateCalendarReferenceDate.tsx.preview | 1 + .../date-pickers/date-calendar/date-calendar.md | 13 +++++++++++++ 5 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js create mode 100644 docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx create mode 100644 docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md index 2a5f10a8acc5d..8a5cd43908fce 100644 --- a/docs/data/date-pickers/base-concepts/base-concepts.md +++ b/docs/data/date-pickers/base-concepts/base-concepts.md @@ -89,11 +89,11 @@ In the demo below, you can see that the calendar is set to April 2022 on mount: {{"demo": "ReferenceDateUsingValue.js"}} -When `value` and `defaultValue` contains no valid date, the component will try to find a reference date that passed the validation to initialize its rendering: +When `value` and `defaultValue` contains no valid date, the component will try to find a reference date that passes the validation to initialize its rendering: {{"demo": "ReferenceDateDefaultBehavior.js"}} -You can override this date using the `referenceDate` prop. +You can override this date using the `referenceDate` prop: {{"demo": "ReferenceDateExplicitDateTimePicker.js"}} diff --git a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js new file mode 100644 index 0000000000000..2e2444fb77dbf --- /dev/null +++ b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +export default function DateCalendarReferenceDate() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx new file mode 100644 index 0000000000000..2e2444fb77dbf --- /dev/null +++ b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +export default function DateCalendarReferenceDate() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview new file mode 100644 index 0000000000000..18e740c1ed29b --- /dev/null +++ b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index 3e090baed1b73..c1856c89e3c53 100644 --- a/docs/data/date-pickers/date-calendar/date-calendar.md +++ b/docs/data/date-pickers/date-calendar/date-calendar.md @@ -44,6 +44,19 @@ Views will appear in the order they're included in the `views` array. {{"demo": "DateCalendarViews.js"}} +## Choose the initial year / month + +If `value` or `defaultValue` contains a valid date, this date will be used to choose which month to render in the `day` view and which year to render in the `month` view. +If both `value` and `defaultValue` contains no valid date, the component will try to find a month and year that passes the validation. + +You can override this date using the `referenceDate`, in the example below the calendar renders April 2014 when opened even though no date is visually selected: + +{{"demo": "DateCalendarReferenceDate.js"}} + +:::success +Learn more about the `referenceDate` in the [dedicated doc section](/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined) +::: + ## Month and Year Calendar If you only need the `year` view or the `month` view, you can use the `YearCalendar` / `MonthCalendar` components: From 0b9afaa06d9f24e33d1d2471fec673b77c897320 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 28 Aug 2023 09:43:33 +0200 Subject: [PATCH 5/7] Code review Lukas --- docs/pages/x/api/date-pickers/date-picker.json | 2 +- docs/pages/x/api/date-pickers/date-range-picker.json | 2 +- docs/pages/x/api/date-pickers/date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-date-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-date-range-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/desktop-time-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-date-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-date-range-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/mobile-time-picker.json | 2 +- docs/pages/x/api/date-pickers/static-date-picker.json | 2 +- docs/pages/x/api/date-pickers/static-date-range-picker.json | 2 +- docs/pages/x/api/date-pickers/static-date-time-picker.json | 2 +- docs/pages/x/api/date-pickers/static-time-picker.json | 2 +- docs/pages/x/api/date-pickers/time-picker.json | 2 +- .../x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx | 2 +- .../src/DesktopDateRangePicker/DesktopDateRangePicker.tsx | 2 +- .../src/MobileDateRangePicker/MobileDateRangePicker.tsx | 2 +- .../src/StaticDateRangePicker/StaticDateRangePicker.tsx | 2 +- packages/x-date-pickers/src/DatePicker/DatePicker.tsx | 2 +- packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx | 2 +- .../x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx | 2 +- .../src/DesktopDateTimePicker/DesktopDateTimePicker.tsx | 2 +- .../x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx | 2 +- .../x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx | 2 +- .../src/MobileDateTimePicker/MobileDateTimePicker.tsx | 2 +- .../x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx | 2 +- .../x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx | 2 +- .../src/StaticDateTimePicker/StaticDateTimePicker.tsx | 2 +- .../x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx | 2 +- packages/x-date-pickers/src/TimePicker/TimePicker.tsx | 2 +- .../src/internals/hooks/usePicker/usePickerViews.ts | 2 +- 33 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 21a0f47a7e095..239a7285e57a2 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -112,7 +112,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index a4fd4797efa5d..043c76dccac97 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -113,7 +113,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 47d7d06d0bdef..1ea8b06d7e943 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -120,7 +120,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index ed82992b14eb0..e9d4d53c9f94e 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -108,7 +108,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index 9a5b1895fb283..9d5f00341c4d1 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -109,7 +109,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index 9dc347c024b1e..c83a02b45d252 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -116,7 +116,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index a03d4c07be3a9..3aceebf4a219b 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -86,7 +86,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "selectedSections": { "type": { diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index a1521fe7211e7..6f794005e2cc4 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -108,7 +108,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 82842d5b926af..035b210cc77dc 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -109,7 +109,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index ea21b51c165ef..5e187bac19ad3 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -116,7 +116,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index 0ac7588864b10..8f3bd4dcc77f2 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -86,7 +86,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "selectedSections": { "type": { diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 74d722ab728ef..34d3c1398ac7a 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -93,7 +93,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 391e6d3e61c08..56de0683f9b75 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -94,7 +94,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index ad70d759047eb..a67ced80c0169 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -101,7 +101,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "renderLoading": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index 7044d42543f7b..4e946f8dd1837 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -71,7 +71,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "shouldDisableClock": { "type": { "name": "func" }, diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index c85fe96306382..cdf948d475733 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -90,7 +90,7 @@ }, "referenceDate": { "type": { "name": "any" }, - "default": "The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`." + "default": "The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`." }, "selectedSections": { "type": { diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx index 1d8c2e9f657cf..7fbba6e9bc20f 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx @@ -257,7 +257,7 @@ DateRangePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 708e824b638c0..11dc37eef713e 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -287,7 +287,7 @@ DesktopDateRangePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 42b1c81a92a4f..ee3805477a549 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -287,7 +287,7 @@ MobileDateRangePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx index cc787aa66de21..0e50baea9fa6e 100644 --- a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -235,7 +235,7 @@ StaticDateRangePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx index 9ca8b257c0bd3..884710e0ccfb0 100644 --- a/packages/x-date-pickers/src/DatePicker/DatePicker.tsx +++ b/packages/x-date-pickers/src/DatePicker/DatePicker.tsx @@ -247,7 +247,7 @@ DatePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx index 4df21111df9de..55beff743180b 100644 --- a/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx @@ -285,7 +285,7 @@ DateTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx index cf155ac5e0c5b..446e04631c66b 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -287,7 +287,7 @@ DesktopDatePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index bd1aadbaf1b01..26c2d14845832 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -367,7 +367,7 @@ DesktopDateTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx index 4fa48f03fa75f..8621abd3cbaa6 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx @@ -298,7 +298,7 @@ DesktopTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx index bb4c30612202d..1771a6ee30d0b 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx @@ -283,7 +283,7 @@ MobileDatePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 3f9ecf8be2615..9adc1cb798770 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -335,7 +335,7 @@ MobileDateTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx index 1d7d62da81c7a..936815023a118 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx @@ -262,7 +262,7 @@ MobileTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx index cef4fa4c69e7a..a8671f97512f0 100644 --- a/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx @@ -226,7 +226,7 @@ StaticDatePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 7478a20eda393..f0862ea721f74 100644 --- a/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -276,7 +276,7 @@ StaticDateTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx index 9f0e06f996376..eed677b37c9e5 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx @@ -202,7 +202,7 @@ StaticTimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx index 55c6bedbc883f..8c33c03b15adc 100644 --- a/packages/x-date-pickers/src/TimePicker/TimePicker.tsx +++ b/packages/x-date-pickers/src/TimePicker/TimePicker.tsx @@ -220,7 +220,7 @@ TimePicker.propTypes = { reduceAnimations: PropTypes.bool, /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate: PropTypes.any, /** diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts index 6f1b4070aea58..5d813a662ee25 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts @@ -72,7 +72,7 @@ export interface UsePickerViewsBaseProps< reduceAnimations?: boolean; /** * The date used to generate the new value when both `value` and `defaultValue` are empty. - * @default The closest valid date-time using the validation props, except callbacks such as `shouldDisableDate`. + * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`. */ referenceDate?: TDate; } From 542c7f1b690f6f5f0b09f9ea8f360cf7772d110d Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 28 Aug 2023 13:42:11 +0200 Subject: [PATCH 6/7] Code review: Lukas --- .../base-concepts/ReferenceDateDefaultBehavior.js | 8 ++++---- .../base-concepts/ReferenceDateDefaultBehavior.tsx | 8 ++++---- .../ReferenceDateDefaultBehavior.tsx.preview | 6 +++--- .../base-concepts/ReferenceDateExplicitDateTimePicker.js | 2 +- .../base-concepts/ReferenceDateExplicitDateTimePicker.tsx | 2 +- .../base-concepts/ReferenceDateExplicitTimePicker.js | 2 +- .../base-concepts/ReferenceDateExplicitTimePicker.tsx | 2 +- .../date-pickers/base-concepts/ReferenceDateUsingValue.js | 5 ++++- .../base-concepts/ReferenceDateUsingValue.tsx | 5 ++++- .../base-concepts/ReferenceDateUsingValue.tsx.preview | 5 ++++- docs/data/date-pickers/base-concepts/base-concepts.md | 2 +- .../date-calendar/DateCalendarReferenceDate.js | 5 ++++- .../date-calendar/DateCalendarReferenceDate.tsx | 5 ++++- .../date-calendar/DateCalendarReferenceDate.tsx.preview | 5 ++++- docs/data/date-pickers/date-calendar/date-calendar.md | 6 +++--- 15 files changed, 43 insertions(+), 25 deletions(-) diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js index 9c7ae133b4027..10b05ee90671f 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.js @@ -3,17 +3,17 @@ import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; export default function ReferenceDateDefaultBehavior() { return ( - + - - + + diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx index 9c7ae133b4027..10b05ee90671f 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx @@ -3,17 +3,17 @@ import dayjs from 'dayjs'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; export default function ReferenceDateDefaultBehavior() { return ( - + - - + + diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview index ccc2cf97ff698..c43f53cb6cf21 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateDefaultBehavior.tsx.preview @@ -1,6 +1,6 @@ - + - - + + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js index 623cd4d561ad9..69186b9d0cc2a 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js @@ -11,7 +11,7 @@ export default function ReferenceDateExplicitDateTimePicker() { return ( - + - + - + - + - + ); diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx index 293d28d066a8e..21fcdfd78609d 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx +++ b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx @@ -9,7 +9,10 @@ export default function ReferenceDateUsingValue() { return ( - + ); diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview index c596924539d96..25aebf8f12113 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview +++ b/docs/data/date-pickers/base-concepts/ReferenceDateUsingValue.tsx.preview @@ -1 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md index 8a5cd43908fce..65716d7e1c040 100644 --- a/docs/data/date-pickers/base-concepts/base-concepts.md +++ b/docs/data/date-pickers/base-concepts/base-concepts.md @@ -104,7 +104,7 @@ For example, in a Time Picker, it allows you to choose the date of your value: ## Accessibility -Both `Desktop` and `Mobile` Date and Time Pickers are using `role="dialog"` to display their interactive view parts, and thus they should follow [Modal accessibility guidelines](/material-ui/react-modal/#accessibility). +Both `Desktop` and `Mobile` Date and Time Pickers are using `role="dialog"` to display their interactive view parts and thus they should follow [Modal accessibility guidelines](/material-ui/react-modal/#accessibility). This behavior is automated as much as possible, ensuring that the Date and Time Pickers are accessible in most cases. A correct `aria-labelledby` value is assigned to the dialog component based on the following rules: diff --git a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js index 2e2444fb77dbf..8fd1d2a5f7702 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js +++ b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.js @@ -9,7 +9,10 @@ export default function DateCalendarReferenceDate() { return ( - + ); diff --git a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx index 2e2444fb77dbf..8fd1d2a5f7702 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx +++ b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx @@ -9,7 +9,10 @@ export default function DateCalendarReferenceDate() { return ( - + ); diff --git a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview index 18e740c1ed29b..6c1de1100a13c 100644 --- a/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview +++ b/docs/data/date-pickers/date-calendar/DateCalendarReferenceDate.tsx.preview @@ -1 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index c1856c89e3c53..1c0a13132b8da 100644 --- a/docs/data/date-pickers/date-calendar/date-calendar.md +++ b/docs/data/date-pickers/date-calendar/date-calendar.md @@ -47,14 +47,14 @@ Views will appear in the order they're included in the `views` array. ## Choose the initial year / month If `value` or `defaultValue` contains a valid date, this date will be used to choose which month to render in the `day` view and which year to render in the `month` view. -If both `value` and `defaultValue` contains no valid date, the component will try to find a month and year that passes the validation. +If both `value` and `defaultValue` contain no valid date, the component will try to find a month and year that satisfies the validation rules. -You can override this date using the `referenceDate`, in the example below the calendar renders April 2014 when opened even though no date is visually selected: +You can override this date using the `referenceDate`, in the example below the calendar renders April 2022 even though no date is visually selected: {{"demo": "DateCalendarReferenceDate.js"}} :::success -Learn more about the `referenceDate` in the [dedicated doc section](/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined) +Learn more about the `referenceDate` in the [dedicated doc section](/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined). ::: ## Month and Year Calendar From 200ac531003c97ee28b9c78c110907043db8da15 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 28 Aug 2023 14:45:56 +0200 Subject: [PATCH 7/7] Code review: Lukas --- .../base-concepts/ReferenceDateExplicitDateTimePicker.js | 2 +- .../base-concepts/ReferenceDateExplicitDateTimePicker.tsx | 2 +- .../base-concepts/ReferenceDateExplicitTimePicker.js | 2 +- .../base-concepts/ReferenceDateExplicitTimePicker.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js index 69186b9d0cc2a..34a74061a5f1b 100644 --- a/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js +++ b/docs/data/date-pickers/base-concepts/ReferenceDateExplicitDateTimePicker.js @@ -11,7 +11,7 @@ export default function ReferenceDateExplicitDateTimePicker() { return ( - + - + - + - +