[docs] Refactor Localization documentation sections (#11989)

mui · Feb 8, 2024 · ee4f820 · ee4f820
1 parent 85aebeb
commit ee4f820
Show file tree

Hide file tree

Showing 24 changed files with 143 additions and 90 deletions.
diff --git 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
+## Localization
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+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.
 
-## Localization
+## Validation
 
-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/).
+See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.
diff --git 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 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/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"
 />
diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
@@ -28,15 +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 date format
+## Localization
 
-{{"demo": "CustomDateFormat.js"}}
+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.
 
-## Localization
+### Customize the date format
 
-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.
+{{"demo": "CustomDateFormat.js"}}
+
+:::info
+See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
+:::
 
 ## 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
@@ -112,13 +112,13 @@ You can enable the clearable behavior:
 
 {{"demo": "ClearableProp.js"}}
 
-## Validation
+## Localization
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+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.
 
-## Localization
+## Validation
 
-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/).
+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
@@ -54,10 +54,10 @@ You can take advantage of the [DateRangePickerDay](/x/api/date-pickers/date-rang
 
 {{"demo": "CustomDateRangePickerDay.js"}}
 
-## Validation
+## Localization
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+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.
 
-## Localization
+## Validation
 
-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/).
+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
@@ -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
+
+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-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -102,9 +102,13 @@ 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
+
+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
 
-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/CustomDateTimeFormat.js b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.js
@@ -6,29 +6,24 @@ 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
         components={['DateTimeField', 'DateTimeField', 'DateTimeField']}
       >
         <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 b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx
@@ -1,34 +1,29 @@
 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
         components={['DateTimeField', 'DateTimeField', 'DateTimeField']}
       >
         <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
@@ -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"
+/>
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
@@ -28,15 +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 date time format
+## Localization
 
-{{"demo": "CustomDateTimeFormat.js"}}
+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.
 
-## Localization
+### Customize the date time format
 
-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.
+{{"demo": "CustomDateTimeFormat.js"}}
+
+:::info
+See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
+:::
 
 ## 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
@@ -110,10 +110,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo
 
 {{"demo": "DateTimePickerViewRenderers.js"}}
 
-## Validation
+## Localization
 
-You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).
+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.
 
-## Localization
+## Validation
 
-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/).
+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
@@ -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
+
+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-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
+
+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
 
-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
@@ -86,6 +86,10 @@ The following example combines these properties to customize which options are r
 
 {{"demo": "DigitalClockSkipDisabled.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.
+
 ## 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
@@ -54,6 +54,10 @@ You can find more information about 12h/24h format in the [Date localization pag
 
 {{"demo": "TimeClockAmPm.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.
+
 ## 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/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>