[docs] Improve Pickers name prop examples (#11422)

mui · Dec 18, 2023 · 79f4bd6 · 79f4bd6
1 parent 51d0059
commit 79f4bd6
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 19 deletions.
diff --git a/docs/data/date-pickers/date-picker/FormPropsDatePickers.js b/docs/data/date-pickers/date-picker/FormPropsDatePickers.js
@@ -7,10 +7,10 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 export default function FormPropsDatePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DatePicker', 'DatePicker']}>
+      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
         <DatePicker label="disabled" disabled />
         <DatePicker label="readOnly" readOnly />
-        <DatePicker label="name" name="date_picker" />
+        <DatePicker label="name" name="startDate" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx b/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx
@@ -7,10 +7,10 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 export default function FormPropsDatePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DatePicker', 'DatePicker']}>
+      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
         <DatePicker label="disabled" disabled />
         <DatePicker label="readOnly" readOnly />
-        <DatePicker label="name" name="date_picker" />
+        <DatePicker label="name" name="startDate" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx.preview b/docs/data/date-pickers/date-picker/FormPropsDatePickers.tsx.preview
@@ -1,3 +1,3 @@
 <DatePicker label="disabled" disabled />
 <DatePicker label="readOnly" readOnly />
-<DatePicker label="name" name="date_picker" />
+<DatePicker label="name" name="startDate" />
diff --git a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.js b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.js
@@ -9,7 +9,10 @@ export default function SingleInputDateRangePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['SingleInputDateRangeField']}>
-        <DateRangePicker slots={{ field: SingleInputDateRangeField }} />
+        <DateRangePicker
+          slots={{ field: SingleInputDateRangeField }}
+          name="allowedRange"
+        />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx
@@ -9,7 +9,10 @@ export default function SingleInputDateRangePicker() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['SingleInputDateRangeField']}>
-        <DateRangePicker slots={{ field: SingleInputDateRangeField }} />
+        <DateRangePicker
+          slots={{ field: SingleInputDateRangeField }}
+          name="allowedRange"
+        />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx.preview b/docs/data/date-pickers/date-range-picker/SingleInputDateRangePicker.tsx.preview
@@ -1 +1,4 @@
-<DateRangePicker slots={{ field: SingleInputDateRangeField }} />
+<DateRangePicker
+  slots={{ field: SingleInputDateRangeField }}
+  name="allowedRange"
+/>
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
@@ -83,7 +83,8 @@ This prop will be ignored on the mobile picker.
 
 ### Use a single input field
 
-You can pass the `SingleInputDateRangeField` component to the Date Range Picker to use it for keyboard editing:
+You can pass the `SingleInputDateRangeField` component to the Date Range Picker to use it for keyboard editing.
+In such case the Picker component can pass the `name` prop to the input.
 
 {{"demo": "SingleInputDateRangePicker.js"}}
 

diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.js
@@ -7,10 +7,12 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 export default function FormPropsDateTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker', 'DateTimePicker']}>
+      <DemoContainer
+        components={['DateTimePicker', 'DateTimePicker', 'DateTimePicker']}
+      >
         <DateTimePicker label="disabled" disabled />
         <DateTimePicker label="readOnly" readOnly />
-        <DateTimePicker label="name" name="date_time_picker" />
+        <DateTimePicker label="name" name="startDateTime" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx
@@ -7,10 +7,12 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 export default function FormPropsDateTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateTimePicker', 'DateTimePicker']}>
+      <DemoContainer
+        components={['DateTimePicker', 'DateTimePicker', 'DateTimePicker']}
+      >
         <DateTimePicker label="disabled" disabled />
         <DateTimePicker label="readOnly" readOnly />
-        <DateTimePicker label="name" name="date_time_picker" />
+        <DateTimePicker label="name" name="startDateTime" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview b/docs/data/date-pickers/date-time-picker/FormPropsDateTimePickers.tsx.preview
@@ -1,3 +1,3 @@
 <DateTimePicker label="disabled" disabled />
 <DateTimePicker label="readOnly" readOnly />
-<DateTimePicker label="name" name="date_time_picker" />
+<DateTimePicker label="name" name="startDateTime" />
diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.js b/docs/data/date-pickers/time-picker/FormPropsTimePickers.js
@@ -7,10 +7,10 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 export default function FormPropsTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['TimePicker', 'TimePicker']}>
+      <DemoContainer components={['TimePicker', 'TimePicker', 'TimePicker']}>
         <TimePicker label="disabled" disabled />
         <TimePicker label="readOnly" readOnly />
-        <TimePicker label="name" name="time_picker" />
+        <TimePicker label="name" name="startTime" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx
@@ -7,10 +7,10 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 export default function FormPropsTimePickers() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['TimePicker', 'TimePicker']}>
+      <DemoContainer components={['TimePicker', 'TimePicker', 'TimePicker']}>
         <TimePicker label="disabled" disabled />
         <TimePicker label="readOnly" readOnly />
-        <TimePicker label="name" name="time_picker" />
+        <TimePicker label="name" name="startTime" />
       </DemoContainer>
     </LocalizationProvider>
   );

diff --git a/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview b/docs/data/date-pickers/time-picker/FormPropsTimePickers.tsx.preview
@@ -1,3 +1,3 @@
 <TimePicker label="disabled" disabled />
 <TimePicker label="readOnly" readOnly />
-<TimePicker label="name" name="time_picker" />
+<TimePicker label="name" name="startTime" />