From ca601f292915a3fdca0ed72de9841c0e75dba7c0 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 10:12:34 +0200
Subject: [PATCH 01/15] Fix typos

---
 docs/data/date-pickers/date-field/date-field.md | 2 +-
 docs/data/date-pickers/time-field/time-field.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
index 9c7db8b60ebfe..d348d57f8338e 100644
--- a/docs/data/date-pickers/date-field/date-field.md
+++ b/docs/data/date-pickers/date-field/date-field.md
@@ -34,7 +34,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-Use the `LocalizationProvider` to change the date-library locale used in the time field.
+Use the `LocalizationProvider` to change the date-library locale used in the date field.
 See the [localization documentation page](/x/react-date-pickers/localization/) for more details.
 
 ## Validation
diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
index 9521a56f84990..4ae6e66dffa3d 100644
--- a/docs/data/date-pickers/time-field/time-field.md
+++ b/docs/data/date-pickers/time-field/time-field.md
@@ -34,7 +34,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-Use the `LocalizationProvider` to change the date-library locale used in the date field.
+Use the `LocalizationProvider` to change the date-library locale used in the time field.
 See the [localization documentation page](/x/react-date-pickers/localization/) for more details.
 
 ## Validation

From 022cc9f06c565d9f3b4264e83c536c75b6e54704 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 11:41:17 +0200
Subject: [PATCH 02/15] Add missing `pages` word

---
 docs/data/date-pickers/date-calendar/date-calendar.md           | 2 +-
 docs/data/date-pickers/date-picker/date-picker.md               | 2 +-
 .../date-pickers/date-range-calendar/date-range-calendar.md     | 2 +-
 docs/data/date-pickers/date-time-picker/date-time-picker.md     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md
index c4c43811e4a3e..2d5bfe2650d1b 100644
--- a/docs/data/date-pickers/date-calendar/date-calendar.md
+++ b/docs/data/date-pickers/date-calendar/date-calendar.md
@@ -101,4 +101,4 @@ You can find the documentation in the [Validation page](/x/react-date-pickers/va
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/).
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
index 85018f5efc0bb..b22865bf18065 100644
--- a/docs/data/date-pickers/date-picker/date-picker.md
+++ b/docs/data/date-pickers/date-picker/date-picker.md
@@ -118,7 +118,7 @@ You can find the documentation in the [Validation page](/x/react-date-pickers/va
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/).
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
 
 ## Customization
 
diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
index 361358446f613..949c6b61232eb 100644
--- a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
+++ b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
@@ -60,4 +60,4 @@ You can find the documentation in the [Validation page](/x/react-date-pickers/va
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/).
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md
index 15f6c45a5a151..1c88f48fbd6f9 100644
--- a/docs/data/date-pickers/date-time-picker/date-time-picker.md
+++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md
@@ -116,4 +116,4 @@ You can find the documentation in the [Validation page](/x/react-date-pickers/va
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/).
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.

From 97c776de324883b6563c44f383e5b6f9c865d97b Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 11:42:17 +0200
Subject: [PATCH 03/15] Make `DateField` doc consistent and link to `custom
 formats`

---
 docs/data/date-pickers/date-field/CustomDateFormat.tsx | 10 +++-------
 docs/data/date-pickers/date-field/date-field.md        |  7 +++++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx b/docs/data/date-pickers/date-field/CustomDateFormat.tsx
index d4da1d646da77..1e0e073f8eb4f 100644
--- a/docs/data/date-pickers/date-field/CustomDateFormat.tsx
+++ b/docs/data/date-pickers/date-field/CustomDateFormat.tsx
@@ -1,26 +1,22 @@
 import * as React from 'react';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateField } from '@mui/x-date-pickers/DateField';
 
 export default function CustomDateFormat() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DateField']}>
         <DateField
           label="Dash separator"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17')}
           format="MM-DD-YYYY"
         />
         <DateField
           label="Full letter month"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17')}
           format="LL"
         />
       </DemoContainer>
diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
index d348d57f8338e..9e6ad833dfd61 100644
--- a/docs/data/date-pickers/date-field/date-field.md
+++ b/docs/data/date-pickers/date-field/date-field.md
@@ -32,10 +32,13 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 {{"demo": "CustomDateFormat.js"}}
 
+:::info
+You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
+:::
+
 ## Localization
 
-Use the `LocalizationProvider` to change the date-library locale used in the date field.
-See the [localization documentation page](/x/react-date-pickers/localization/) for more details.
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
 
 ## Validation
 

From 12742daba3e2ae89e849f2ade697199227d471f4 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 11:53:14 +0200
Subject: [PATCH 04/15] Move locaization before validation section for
 consistency

---
 docs/data/date-pickers/date-calendar/date-calendar.md     | 8 ++++----
 docs/data/date-pickers/date-picker/date-picker.md         | 8 ++++----
 .../date-range-calendar/date-range-calendar.md            | 8 ++++----
 .../date-pickers/date-time-picker/date-time-picker.md     | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md
index 2d5bfe2650d1b..0b2bf25255282 100644
--- a/docs/data/date-pickers/date-calendar/date-calendar.md
+++ b/docs/data/date-pickers/date-calendar/date-calendar.md
@@ -95,10 +95,10 @@ The following demo shows how to add a badge on some day based on server side dat
 
 {{"demo": "DateCalendarServerRequest.js"}}
 
-## Validation
-
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
-
 ## Localization
 
 You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
index b22865bf18065..c152e731897a8 100644
--- a/docs/data/date-pickers/date-picker/date-picker.md
+++ b/docs/data/date-pickers/date-picker/date-picker.md
@@ -112,14 +112,14 @@ You can enable the clearable behavior:
 
 {{"demo": "ClearableProp.js"}}
 
-## Validation
-
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
-
 ## Localization
 
 You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
 
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+
 ## Customization
 
 You can check out multiple examples of how to customize the date pickers and their subcomponents.
diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
index 949c6b61232eb..cdf1926cf891a 100644
--- a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
+++ b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
@@ -54,10 +54,10 @@ You can take advantage of the [DateRangePickerDay](/x/api/date-pickers/date-rang
 
 {{"demo": "CustomDateRangePickerDay.js"}}
 
-## Validation
-
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
-
 ## Localization
 
 You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md
index 1c88f48fbd6f9..9a07ddebd3cbf 100644
--- a/docs/data/date-pickers/date-time-picker/date-time-picker.md
+++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md
@@ -110,10 +110,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo
 
 {{"demo": "DateTimePickerViewRenderers.js"}}
 
-## Validation
-
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
-
 ## Localization
 
 You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
+## Validation
+
+You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).

From 42824412d00753c83c990a03ad444a464a9a7696 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 11:53:58 +0200
Subject: [PATCH 05/15] Make `TimeField` doc consistent and link to `custom
 formats`

---
 .../date-pickers/time-field/CustomTimeFormat.tsx    | 13 ++++---------
 docs/data/date-pickers/time-field/time-field.md     |  3 +--
 docs/data/date-pickers/time-picker/time-picker.md   |  4 ++++
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx
index 8928647c5b3ca..abd0fea47a3a4 100644
--- a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx
+++ b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx
@@ -1,32 +1,27 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { TimeField } from '@mui/x-date-pickers/TimeField';
 
 export default function CustomTimeFormat() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['TimeField', 'TimeField', 'TimeField']}>
         <TimeField
           label="Format with meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="hh:mm a"
         />
         <TimeField
           label="Format without meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="HH:mm"
         />
         <TimeField
           label="Format with seconds"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="HH:mm:ss"
         />
       </DemoContainer>
diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
index 4ae6e66dffa3d..b0719526ad578 100644
--- a/docs/data/date-pickers/time-field/time-field.md
+++ b/docs/data/date-pickers/time-field/time-field.md
@@ -34,8 +34,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-Use the `LocalizationProvider` to change the date-library locale used in the time field.
-See the [localization documentation page](/x/react-date-pickers/localization/) for more details.
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md
index ed5d6492e8e2b..d7e3a900543fb 100644
--- a/docs/data/date-pickers/time-picker/time-picker.md
+++ b/docs/data/date-pickers/time-picker/time-picker.md
@@ -108,6 +108,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo
 
 {{"demo": "TimePickerViewRenderers.js"}}
 
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
 ## Validation
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).

From e181882b3d24171a7861046256573d9876b4ae48 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:04:18 +0200
Subject: [PATCH 06/15] Add missing localization sections to `clocks` pages

---
 docs/data/date-pickers/digital-clock/digital-clock.md | 4 ++++
 docs/data/date-pickers/time-clock/time-clock.md       | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/docs/data/date-pickers/digital-clock/digital-clock.md b/docs/data/date-pickers/digital-clock/digital-clock.md
index d545babc4e7ad..0c49c0de336c4 100644
--- a/docs/data/date-pickers/digital-clock/digital-clock.md
+++ b/docs/data/date-pickers/digital-clock/digital-clock.md
@@ -86,6 +86,10 @@ The following example combines these properties to customize which options are r
 
 {{"demo": "DigitalClockSkipDisabled.js"}}
 
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
 ## Validation
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md
index 4e7a100a7579f..4b44ad3567744 100644
--- a/docs/data/date-pickers/time-clock/time-clock.md
+++ b/docs/data/date-pickers/time-clock/time-clock.md
@@ -54,6 +54,10 @@ You can find more information about 12h/24h format in the [Date localization pag
 
 {{"demo": "TimeClockAmPm.js"}}
 
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
 ## Validation
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).

From 8f8c5d00bfcf152b7e9560183633cdadbe6b5539 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:05:48 +0200
Subject: [PATCH 07/15] Make `DateTimeField` doc consistent and link to `custom
 formats`

---
 .../date-time-field/CustomDateTimeFormat.tsx        | 13 ++++---------
 .../date-pickers/date-time-field/date-time-field.md |  7 +++++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx
index 3cda7812ec614..c1a035f613efc 100644
--- a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx
+++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';
 
 export default function CustomDateTimeFormat() {
-  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer
@@ -15,20 +13,17 @@ export default function CustomDateTimeFormat() {
       >
         <DateTimeField
           label="Format with meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="L hh:mm a"
         />
         <DateTimeField
           label="Format without meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="L HH:mm"
         />
         <DateTimeField
           label="Localized format with full letter month"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="LLL"
         />
       </DemoContainer>
diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md
index 33fb877cc5efb..d45dcfbdb6950 100644
--- a/docs/data/date-pickers/date-time-field/date-time-field.md
+++ b/docs/data/date-pickers/date-time-field/date-time-field.md
@@ -32,10 +32,13 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 {{"demo": "CustomDateTimeFormat.js"}}
 
+:::info
+You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
+:::
+
 ## Localization
 
-Use the `LocalizationProvider` to change the date-library locale used in the date time field.
-See the [localization documentation page](/x/react-date-pickers/localization/) for more details.
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
 
 ## Validation
 

From fb4f604116b2589ba0b30b671f0dc131f28667a0 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:07:53 +0200
Subject: [PATCH 08/15] Consistent localization section on date range
 components pages

---
 .../date-pickers/date-range-field/date-range-field.md     | 8 ++++++++
 .../date-pickers/date-range-picker/date-range-picker.md   | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/docs/data/date-pickers/date-range-field/date-range-field.md b/docs/data/date-pickers/date-range-field/date-range-field.md
index 1ffd35d53c541..edd7f39f6fbd9 100644
--- a/docs/data/date-pickers/date-range-field/date-range-field.md
+++ b/docs/data/date-pickers/date-range-field/date-range-field.md
@@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled.
 
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
+
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
+## Validation
+
+See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
index 55f7b8c7a6546..58cca22bd3d58 100644
--- a/docs/data/date-pickers/date-range-picker/date-range-picker.md
+++ b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -102,6 +102,10 @@ To simplify range selection, you can add [shortcuts](/x/react-date-pickers/short
 
 You can find the documentation in the [Custom field page](/x/react-date-pickers/custom-field/).
 
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
 ## Validation
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).

From 4167b1f0b6be8a9c3bed652d1f40d52eaf160b98 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:08:40 +0200
Subject: [PATCH 09/15] Consistent sections on `time-range-field`

---
 .../date-pickers/time-range-field/time-range-field.md     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md
index 2ca2beb1a1658..8870d7a58dd3a 100644
--- a/docs/data/date-pickers/time-range-field/time-range-field.md
+++ b/docs/data/date-pickers/time-range-field/time-range-field.md
@@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled.
 
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
+
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
+## Validation
+
+See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.

From 2c3716f3b6778129ea6805b3b6debca8ff0af0e8 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:10:43 +0200
Subject: [PATCH 10/15] Consistent sections on `date-time-range` components

---
 .../date-time-range-field/date-time-range-field.md        | 8 ++++++++
 .../date-time-range-picker/date-time-range-picker.md      | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
index 98a5a0c459f04..c1addc0eb5627 100644
--- a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
+++ b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
@@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled.
 
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
+
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
+## Validation
+
+See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
diff --git a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
index 277748cf49177..824490e7c4482 100644
--- a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
+++ b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
@@ -100,6 +100,10 @@ You can pass a different view renderer to the Date Time Range Picker to customiz
 
 {{"demo": "DateTimeRangePickerViewRenderer.js"}}
 
+## Localization
+
+You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+
 ## Validation
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).

From 89bc0189b412b72357491e596d84ad53eecd8a3c Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:16:19 +0200
Subject: [PATCH 11/15] Consistent `Validation` section text

---
 docs/data/date-pickers/date-calendar/date-calendar.md           | 2 +-
 docs/data/date-pickers/date-field/date-field.md                 | 2 +-
 docs/data/date-pickers/date-picker/date-picker.md               | 2 +-
 .../date-pickers/date-range-calendar/date-range-calendar.md     | 2 +-
 docs/data/date-pickers/date-range-field/date-range-field.md     | 2 +-
 docs/data/date-pickers/date-range-picker/date-range-picker.md   | 2 +-
 docs/data/date-pickers/date-time-field/date-time-field.md       | 2 +-
 docs/data/date-pickers/date-time-picker/date-time-picker.md     | 2 +-
 .../date-pickers/date-time-range-field/date-time-range-field.md | 2 +-
 .../date-time-range-picker/date-time-range-picker.md            | 2 +-
 docs/data/date-pickers/digital-clock/digital-clock.md           | 2 +-
 docs/data/date-pickers/time-clock/time-clock.md                 | 2 +-
 docs/data/date-pickers/time-field/time-field.md                 | 2 +-
 docs/data/date-pickers/time-picker/time-picker.md               | 2 +-
 docs/data/date-pickers/time-range-field/time-range-field.md     | 2 +-
 15 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md
index 0b2bf25255282..17cf070375001 100644
--- a/docs/data/date-pickers/date-calendar/date-calendar.md
+++ b/docs/data/date-pickers/date-calendar/date-calendar.md
@@ -101,4 +101,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
index 9e6ad833dfd61..e1b02b19f2ad4 100644
--- a/docs/data/date-pickers/date-field/date-field.md
+++ b/docs/data/date-pickers/date-field/date-field.md
@@ -42,4 +42,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
index c152e731897a8..3a056602a5af3 100644
--- a/docs/data/date-pickers/date-picker/date-picker.md
+++ b/docs/data/date-pickers/date-picker/date-picker.md
@@ -118,7 +118,7 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
 
 ## Customization
 
diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
index cdf1926cf891a..9212b1a9c17be 100644
--- a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
+++ b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
@@ -60,4 +60,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-range-field/date-range-field.md b/docs/data/date-pickers/date-range-field/date-range-field.md
index edd7f39f6fbd9..c5da51e800ba8 100644
--- a/docs/data/date-pickers/date-range-field/date-range-field.md
+++ b/docs/data/date-pickers/date-range-field/date-range-field.md
@@ -41,4 +41,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
index 58cca22bd3d58..be5245049a093 100644
--- a/docs/data/date-pickers/date-range-picker/date-range-picker.md
+++ b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -108,7 +108,7 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
 
 ## Month Range Picker 🚧
 
diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md
index d45dcfbdb6950..dc6264a59559d 100644
--- a/docs/data/date-pickers/date-time-field/date-time-field.md
+++ b/docs/data/date-pickers/date-time-field/date-time-field.md
@@ -42,4 +42,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md
index 9a07ddebd3cbf..be2b5321e67c4 100644
--- a/docs/data/date-pickers/date-time-picker/date-time-picker.md
+++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md
@@ -116,4 +116,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
index c1addc0eb5627..2d82e9a448738 100644
--- a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
+++ b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
@@ -41,4 +41,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
index 824490e7c4482..6c5f5acf228d6 100644
--- a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
+++ b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
@@ -106,4 +106,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/digital-clock/digital-clock.md b/docs/data/date-pickers/digital-clock/digital-clock.md
index 0c49c0de336c4..0f08f6f3a6db1 100644
--- a/docs/data/date-pickers/digital-clock/digital-clock.md
+++ b/docs/data/date-pickers/digital-clock/digital-clock.md
@@ -92,4 +92,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md
index 4b44ad3567744..f13e8422ca963 100644
--- a/docs/data/date-pickers/time-clock/time-clock.md
+++ b/docs/data/date-pickers/time-clock/time-clock.md
@@ -60,4 +60,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
index b0719526ad578..b4a7c841468c6 100644
--- a/docs/data/date-pickers/time-field/time-field.md
+++ b/docs/data/date-pickers/time-field/time-field.md
@@ -38,4 +38,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md
index d7e3a900543fb..0c8c6c058d9a5 100644
--- a/docs/data/date-pickers/time-picker/time-picker.md
+++ b/docs/data/date-pickers/time-picker/time-picker.md
@@ -114,4 +114,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md
index 8870d7a58dd3a..df628fc56a2e5 100644
--- a/docs/data/date-pickers/time-range-field/time-range-field.md
+++ b/docs/data/date-pickers/time-range-field/time-range-field.md
@@ -41,4 +41,4 @@ You can find the documentation about localization in the [Date format and locali
 
 ## Validation
 
-See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details.
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

From 5fbd094ced677a3e34ac67491edbc52d636e0677 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:18:49 +0200
Subject: [PATCH 12/15] Simplify `Localization` section copyright

---
 docs/data/date-pickers/date-calendar/date-calendar.md           | 2 +-
 docs/data/date-pickers/date-field/date-field.md                 | 2 +-
 docs/data/date-pickers/date-picker/date-picker.md               | 2 +-
 .../date-pickers/date-range-calendar/date-range-calendar.md     | 2 +-
 docs/data/date-pickers/date-range-field/date-range-field.md     | 2 +-
 docs/data/date-pickers/date-range-picker/date-range-picker.md   | 2 +-
 docs/data/date-pickers/date-time-field/date-time-field.md       | 2 +-
 docs/data/date-pickers/date-time-picker/date-time-picker.md     | 2 +-
 .../date-pickers/date-time-range-field/date-time-range-field.md | 2 +-
 .../date-time-range-picker/date-time-range-picker.md            | 2 +-
 docs/data/date-pickers/digital-clock/digital-clock.md           | 2 +-
 docs/data/date-pickers/time-clock/time-clock.md                 | 2 +-
 docs/data/date-pickers/time-field/time-field.md                 | 2 +-
 docs/data/date-pickers/time-picker/time-picker.md               | 2 +-
 docs/data/date-pickers/time-range-field/time-range-field.md     | 2 +-
 15 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md
index 17cf070375001..f8dfa6e61c3aa 100644
--- a/docs/data/date-pickers/date-calendar/date-calendar.md
+++ b/docs/data/date-pickers/date-calendar/date-calendar.md
@@ -97,7 +97,7 @@ The following demo shows how to add a badge on some day based on server side dat
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
index e1b02b19f2ad4..b372d5ee901f1 100644
--- a/docs/data/date-pickers/date-field/date-field.md
+++ b/docs/data/date-pickers/date-field/date-field.md
@@ -38,7 +38,7 @@ You can find more information about [custom formats](/x/react-date-pickers/adapt
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
index 3a056602a5af3..e371e8afcf7a0 100644
--- a/docs/data/date-pickers/date-picker/date-picker.md
+++ b/docs/data/date-pickers/date-picker/date-picker.md
@@ -114,7 +114,7 @@ You can enable the clearable behavior:
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
index 9212b1a9c17be..06f3f0d8d7cab 100644
--- a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
+++ b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
@@ -56,7 +56,7 @@ You can take advantage of the [DateRangePickerDay](/x/api/date-pickers/date-rang
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-range-field/date-range-field.md b/docs/data/date-pickers/date-range-field/date-range-field.md
index c5da51e800ba8..d81bf367ba37a 100644
--- a/docs/data/date-pickers/date-range-field/date-range-field.md
+++ b/docs/data/date-pickers/date-range-field/date-range-field.md
@@ -37,7 +37,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
index be5245049a093..b9662a672402c 100644
--- a/docs/data/date-pickers/date-range-picker/date-range-picker.md
+++ b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -104,7 +104,7 @@ You can find the documentation in the [Custom field page](/x/react-date-pickers/
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md
index dc6264a59559d..3566b5414e3ea 100644
--- a/docs/data/date-pickers/date-time-field/date-time-field.md
+++ b/docs/data/date-pickers/date-time-field/date-time-field.md
@@ -38,7 +38,7 @@ You can find more information about [custom formats](/x/react-date-pickers/adapt
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md
index be2b5321e67c4..c2ba925d76bc6 100644
--- a/docs/data/date-pickers/date-time-picker/date-time-picker.md
+++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md
@@ -112,7 +112,7 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
index 2d82e9a448738..378abff09ee83 100644
--- a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
+++ b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
@@ -37,7 +37,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
index 6c5f5acf228d6..68121e182a38e 100644
--- a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
+++ b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
@@ -102,7 +102,7 @@ You can pass a different view renderer to the Date Time Range Picker to customiz
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/digital-clock/digital-clock.md b/docs/data/date-pickers/digital-clock/digital-clock.md
index 0f08f6f3a6db1..535650aecf9c7 100644
--- a/docs/data/date-pickers/digital-clock/digital-clock.md
+++ b/docs/data/date-pickers/digital-clock/digital-clock.md
@@ -88,7 +88,7 @@ The following example combines these properties to customize which options are r
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md
index f13e8422ca963..042a32a60af5a 100644
--- a/docs/data/date-pickers/time-clock/time-clock.md
+++ b/docs/data/date-pickers/time-clock/time-clock.md
@@ -56,7 +56,7 @@ You can find more information about 12h/24h format in the [Date localization pag
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
index b4a7c841468c6..7b82b5b883224 100644
--- a/docs/data/date-pickers/time-field/time-field.md
+++ b/docs/data/date-pickers/time-field/time-field.md
@@ -34,7 +34,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md
index 0c8c6c058d9a5..f936642668ff9 100644
--- a/docs/data/date-pickers/time-picker/time-picker.md
+++ b/docs/data/date-pickers/time-picker/time-picker.md
@@ -110,7 +110,7 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 
diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md
index df628fc56a2e5..8ba850ecfd50c 100644
--- a/docs/data/date-pickers/time-range-field/time-range-field.md
+++ b/docs/data/date-pickers/time-range-field/time-range-field.md
@@ -37,7 +37,7 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 
 ## Localization
 
-You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) pages.
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
 ## Validation
 

From e66689fc182e2c2e27c50dfb87b5b624d1e775f6 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 12:20:40 +0200
Subject: [PATCH 13/15] docs:typescript:formatted

---
 .../date-pickers/date-field/CustomDateFormat.js   |  8 ++------
 .../date-field/CustomDateFormat.tsx.preview       |  6 ++----
 .../date-time-field/CustomDateTimeFormat.js       | 11 +++--------
 .../CustomDateTimeFormat.tsx.preview              | 15 +++++++++++++++
 .../date-pickers/time-field/CustomTimeFormat.js   | 11 +++--------
 .../time-field/CustomTimeFormat.tsx.preview       | 15 +++++++++++++++
 6 files changed, 40 insertions(+), 26 deletions(-)
 create mode 100644 docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview
 create mode 100644 docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview

diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.js b/docs/data/date-pickers/date-field/CustomDateFormat.js
index 44a9ce3fd9034..1e0e073f8eb4f 100644
--- a/docs/data/date-pickers/date-field/CustomDateFormat.js
+++ b/docs/data/date-pickers/date-field/CustomDateFormat.js
@@ -6,21 +6,17 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateField } from '@mui/x-date-pickers/DateField';
 
 export default function CustomDateFormat() {
-  const [value, setValue] = React.useState(dayjs('2022-04-17'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateField', 'DateField']}>
         <DateField
           label="Dash separator"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17')}
           format="MM-DD-YYYY"
         />
         <DateField
           label="Full letter month"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17')}
           format="LL"
         />
       </DemoContainer>
diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview b/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview
index eaf19d92caf1d..11be65ef4fcf0 100644
--- a/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview
+++ b/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview
@@ -1,12 +1,10 @@
 <DateField
   label="Dash separator"
-  value={value}
-  onChange={(newValue) => setValue(newValue)}
+  defaultValue={dayjs('2022-04-17')}
   format="MM-DD-YYYY"
 />
 <DateField
   label="Full letter month"
-  value={value}
-  onChange={(newValue) => setValue(newValue)}
+  defaultValue={dayjs('2022-04-17')}
   format="LL"
 />
\ No newline at end of file
diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js
index d133317abc68f..c1a035f613efc 100644
--- a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js
+++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js
@@ -6,8 +6,6 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';
 
 export default function CustomDateTimeFormat() {
-  const [value, setValue] = React.useState(dayjs('2022-04-17T15:30'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer
@@ -15,20 +13,17 @@ export default function CustomDateTimeFormat() {
       >
         <DateTimeField
           label="Format with meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="L hh:mm a"
         />
         <DateTimeField
           label="Format without meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="L HH:mm"
         />
         <DateTimeField
           label="Localized format with full letter month"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="LLL"
         />
       </DemoContainer>
diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview
new file mode 100644
index 0000000000000..311732f62ee9b
--- /dev/null
+++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview
@@ -0,0 +1,15 @@
+<DateTimeField
+  label="Format with meridiem"
+  defaultValue={dayjs('2022-04-17T15:30')}
+  format="L hh:mm a"
+/>
+<DateTimeField
+  label="Format without meridiem"
+  defaultValue={dayjs('2022-04-17T15:30')}
+  format="L HH:mm"
+/>
+<DateTimeField
+  label="Localized format with full letter month"
+  defaultValue={dayjs('2022-04-17T15:30')}
+  format="LLL"
+/>
\ No newline at end of file
diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.js b/docs/data/date-pickers/time-field/CustomTimeFormat.js
index eb0ce966cc0b7..abd0fea47a3a4 100644
--- a/docs/data/date-pickers/time-field/CustomTimeFormat.js
+++ b/docs/data/date-pickers/time-field/CustomTimeFormat.js
@@ -6,27 +6,22 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { TimeField } from '@mui/x-date-pickers/TimeField';
 
 export default function CustomTimeFormat() {
-  const [value, setValue] = React.useState(dayjs('2022-04-17T15:30'));
-
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['TimeField', 'TimeField', 'TimeField']}>
         <TimeField
           label="Format with meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="hh:mm a"
         />
         <TimeField
           label="Format without meridiem"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="HH:mm"
         />
         <TimeField
           label="Format with seconds"
-          value={value}
-          onChange={(newValue) => setValue(newValue)}
+          defaultValue={dayjs('2022-04-17T15:30')}
           format="HH:mm:ss"
         />
       </DemoContainer>
diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview
new file mode 100644
index 0000000000000..d82a4aeb479bb
--- /dev/null
+++ b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview
@@ -0,0 +1,15 @@
+<TimeField
+  label="Format with meridiem"
+  defaultValue={dayjs('2022-04-17T15:30')}
+  format="hh:mm a"
+/>
+<TimeField
+  label="Format without meridiem"
+  defaultValue={dayjs('2022-04-17T15:30')}
+  format="HH:mm"
+/>
+<TimeField
+  label="Format with seconds"
+  defaultValue={dayjs('2022-04-17T15:30')}
+  format="HH:mm:ss"
+/>
\ No newline at end of file

From 7f57facdd99ef2720baacacc8b70d58b6cc76bd9 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 13:46:05 +0200
Subject: [PATCH 14/15] Make `customize the format` section a sub-section of
 `Localization`

---
 docs/data/date-pickers/date-field/date-field.md      | 10 +++++-----
 .../date-pickers/date-time-field/date-time-field.md  | 10 +++++-----
 docs/data/date-pickers/time-field/time-field.md      | 12 ++++++++----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
index b372d5ee901f1..45b414610d466 100644
--- a/docs/data/date-pickers/date-field/date-field.md
+++ b/docs/data/date-pickers/date-field/date-field.md
@@ -28,7 +28,11 @@ The value of the component can be uncontrolled or controlled.
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
 
-## Customize the date format
+## Localization
+
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
+
+### Customize the date format
 
 {{"demo": "CustomDateFormat.js"}}
 
@@ -36,10 +40,6 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
 :::
 
-## Localization
-
-See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
-
 ## Validation
 
 See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md
index 3566b5414e3ea..6f118f909ec17 100644
--- a/docs/data/date-pickers/date-time-field/date-time-field.md
+++ b/docs/data/date-pickers/date-time-field/date-time-field.md
@@ -28,7 +28,11 @@ The value of the component can be uncontrolled or controlled.
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
 
-## Customize the date time format
+## Localization
+
+See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
+
+### Customize the date time format
 
 {{"demo": "CustomDateTimeFormat.js"}}
 
@@ -36,10 +40,6 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
 :::
 
-## Localization
-
-See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
-
 ## Validation
 
 See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
index 7b82b5b883224..6324df8b1ba7a 100644
--- a/docs/data/date-pickers/time-field/time-field.md
+++ b/docs/data/date-pickers/time-field/time-field.md
@@ -28,14 +28,18 @@ The value of the component can be uncontrolled or controlled.
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
 
-## Customize the time format
-
-{{"demo": "CustomTimeFormat.js"}}
-
 ## Localization
 
 See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.
 
+### Customize the time format
+
+{{"demo": "CustomTimeFormat.js"}}
+
+:::info
+You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
+:::
+
 ## Validation
 
 See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

From 563d387d7a5440ff5dcfb00ca5b2f06d53b8ca27 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 8 Feb 2024 17:02:44 +0200
Subject: [PATCH 15/15] Code review: Sam

---
 docs/data/date-pickers/date-field/date-field.md           | 2 +-
 docs/data/date-pickers/date-time-field/date-time-field.md | 2 +-
 docs/data/date-pickers/time-field/time-field.md           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
index 45b414610d466..39c4f51b8a5fb 100644
--- a/docs/data/date-pickers/date-field/date-field.md
+++ b/docs/data/date-pickers/date-field/date-field.md
@@ -37,7 +37,7 @@ See the [Date format and localization](/x/react-date-pickers/adapters-locale/) a
 {{"demo": "CustomDateFormat.js"}}
 
 :::info
-You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
+See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
 :::
 
 ## Validation
diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md
index 6f118f909ec17..f6efa09212a81 100644
--- a/docs/data/date-pickers/date-time-field/date-time-field.md
+++ b/docs/data/date-pickers/date-time-field/date-time-field.md
@@ -37,7 +37,7 @@ See the [Date format and localization](/x/react-date-pickers/adapters-locale/) a
 {{"demo": "CustomDateTimeFormat.js"}}
 
 :::info
-You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
+See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
 :::
 
 ## Validation
diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
index 6324df8b1ba7a..8aa989cb60119 100644
--- a/docs/data/date-pickers/time-field/time-field.md
+++ b/docs/data/date-pickers/time-field/time-field.md
@@ -37,7 +37,7 @@ See the [Date format and localization](/x/react-date-pickers/adapters-locale/) a
 {{"demo": "CustomTimeFormat.js"}}
 
 :::info
-You can find more information about [custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) in the documentation page.
+See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
 :::
 
 ## Validation