Fix demo

flaviendelangle · Feb 20, 2025 · bd8b188 · bd8b188
1 parent 4058d3e
commit bd8b188
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.js
@@ -7,6 +7,8 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
+import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro';
+
 function CustomInputAdornment(props) {
   const { hasError, children, sx, ...other } = props;
   return (
@@ -39,6 +41,7 @@ export default function AddWarningIconWhenInvalidRange() {
           maxDate={dayjs('2022-04-19')}
           defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
           onError={setError}
+          slots={{ field: MultiInputDateRangeField }}
           slotProps={{
             textField: (ownerState) => ({
               InputProps: {

diff --git a/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx b/docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx
@@ -7,6 +7,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { DateRangeValidationError } from '@mui/x-date-pickers-pro/models';
+import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
 
 function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
   const { hasError, children, sx, ...other } = props;
@@ -40,6 +41,7 @@ export default function AddWarningIconWhenInvalidRange() {
           maxDate={dayjs('2022-04-19')}
           defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
           onError={setError}
+          slots={{ field: MultiInputDateRangeField }}
           slotProps={{
             textField: (ownerState) => ({
               InputProps: {

diff --git a/docs/data/date-pickers/custom-opening-button/custom-opening-button.md b/docs/data/date-pickers/custom-opening-button/custom-opening-button.md
@@ -52,7 +52,7 @@ In the example below, the warning icon will be visible anytime the current value
 
 {{"demo": "AddWarningIconWhenInvalid.js"}}
 
-To add the same behavior to a picker that do not have an input adornment (for example Date Range Picker),
+To add the same behavior to a picker that do not have an input adornment (for example Date Range Picker when used with a multi input field),
 you need to use the `textField` slot to add one:
 
 {{"demo": "AddWarningIconWhenInvalidRange.js"}}
diff --git a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx
@@ -169,7 +169,7 @@ export function DemoContainer(props: DemoGridProps) {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
-            md: childrenTypes.has('multi-input-range-field') ? 460 : 400,
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 440,
           },
         },
       };