[docs] Add conditional range picker props example (#10227)

docs/data/date-pickers/custom-field/MultiInputFieldTextFieldProps.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+
+export default function MultiInputFieldTextFieldProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangePicker']}>
+        <DateRangePicker
+          slotProps={{
+            textField: ({ position }) => ({
+              color: position === 'start' ? 'success' : 'warning',
+              focused: true,
+            }),
+          }}
+          defaultValue={[dayjs('2022-04-17'), null]}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-field/MultiInputFieldTextFieldProps.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+
+export default function MultiInputFieldTextFieldProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangePicker']}>
+        <DateRangePicker
+          slotProps={{
+            textField: ({ position }) => ({
+              color: position === 'start' ? 'success' : 'warning',
+              focused: true,
+            }),
+          }}
+          defaultValue={[dayjs('2022-04-17'), null]}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/custom-field/MultiInputFieldTextFieldProps.tsx.preview

@@ -0,0 +1,9 @@
+<DateRangePicker
+  slotProps={{
+    textField: ({ position }) => ({
+      color: position === 'start' ? 'success' : 'warning',
+      focused: true,
+    }),
+  }}
+  defaultValue={[dayjs('2022-04-17'), null]}
+/>

docs/data/date-pickers/custom-field/custom-field.md

@@ -23,6 +23,12 @@ You can use the `fieldSeparator` slot to pass custom props to the `Typography` r
 
 {{"demo": "MultiInputFieldSeparatorSlotProps.js"}}
 
+### Customize the `start` and `end` fields differently [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+You can pass conditional props to the `textField` slot to customize the input styling based on the `position`.
+
+{{"demo": "MultiInputFieldTextFieldProps.js"}}
+
 ### Use single input fields on range pickers [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 You can pass the single input fields to the range picker to use it for keyboard editing:

docs/data/date-pickers/date-range-picker/date-range-picker.md

@@ -88,7 +88,7 @@ You can pass the `SingleInputDateRangeField` component to the Date Range Picker
 {{"demo": "SingleInputDateRangePicker.js"}}
 
 :::info
-For more information, check out the [Custom field](/x/react-date-pickers/custom-field/#use-single-input-fields-on-range-pickers) page.
+You can find more information in a [dedicated documentation page section](/x/react-date-pickers/custom-field/#use-single-input-fields-on-range-pickers).
 :::
 
 ### Add shortcuts
@@ -97,6 +97,10 @@ To simplify range selection, you can add [shortcuts](/x/react-date-pickers/short
 
 {{"demo": "BasicRangeShortcuts.js", "bg": "inline", "defaultCodeOpen": false}}
 
+### Customize the field
+
+You can find the documentation in the [Custom field page](/x/react-date-pickers/custom-field/).
+
 ## Validation
 
 You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).