[fields] New prop dateSeparator on range fields

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

@@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
-        <DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+        <DateRangePicker slotProps={{ fieldSeparator: { sx: { color: 'red' } } }} />
         <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
       </DemoContainer>
     </LocalizationProvider>

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

@@ -8,7 +8,9 @@ export default function MultiInputFieldSeparatorSlotProps() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
-        <DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+        <DateRangePicker
+          slotProps={{ fieldSeparator: { sx: { children: ' TOTO ' } } }}
+        />
         <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
       </DemoContainer>
     </LocalizationProvider>

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

@@ -1,2 +1,2 @@
-<DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+<DateRangePicker slotProps={{ fieldSeparator: { sx: { color: 'red' } } }} />
 <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+
+export default function RangeFieldDateSeparator() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
+        <DateRangePicker slotProps={{ field: { dateSeparator: ' to ' } }} />
+        <DateRangePicker
+          slotProps={{ field: { dateSeparator: ' to ' } }}
+          slots={{ field: SingleInputDateRangeField }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+
+export default function RangeFieldDateSeparator() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
+        <DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
+        <DateRangePicker
+          slotProps={{ field: { dateSeparator: 'to' } }}
+          slots={{ field: SingleInputDateRangeField }}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

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

@@ -0,0 +1,5 @@
+<DateRangePicker slotProps={{ field: { dateSeparator: ' to ' } }} />
+<DateRangePicker
+  slotProps={{ field: { dateSeparator: ' to ' } }}
+  slots={{ field: SingleInputDateRangeField }}
+/>

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

@@ -18,7 +18,7 @@ You can use the `textField` slot to pass custom props to the `TextField`:
 
 {{"demo": "TextFieldSlotProps.js"}}
 
-### Customize the separator of multi input fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+### Customize the separator of multi input range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 You can use the `fieldSeparator` slot to pass custom props to the `Typography` rendered between the two `TextField`:
 
@@ -49,6 +49,12 @@ You can manually add an `endAdornment` if you want your range picker to look exa
 This adornment is purely decorative, the focus remains on the field when the picker is opened.
 :::
 
+### Change the separator of range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+You can use the `dateSeparator` prop to change the separator rendered between the two `TextField`:
+
+{{"demo": "RangeFieldDateSeparator.js"}}
+
 ### Change the format density
 
 You can control the field format spacing using the `formatDensity` prop.

docs/pages/x/api/date-pickers/multi-input-date-range-field.json

@@ -2,6 +2,7 @@
   "props": {
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "direction": {
       "type": {

docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json

@@ -3,6 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "direction": {
       "type": {

docs/pages/x/api/date-pickers/multi-input-time-range-field.json

@@ -3,6 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "direction": {
       "type": {

docs/pages/x/api/date-pickers/single-input-date-range-field.json

@@ -9,6 +9,7 @@
       },
       "default": "'primary'"
     },
+    "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableFuture": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/date-pickers/single-input-date-time-range-field.json

@@ -10,6 +10,7 @@
       },
       "default": "'primary'"
     },
+    "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableFuture": { "type": { "name": "bool" }, "default": "false" },

docs/pages/x/api/date-pickers/single-input-time-range-field.json

@@ -10,6 +10,7 @@
       },
       "default": "'primary'"
     },
+    "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" },
     "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableFuture": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json

@@ -5,6 +5,7 @@
       "description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
     },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "dateSeparator": { "description": "String displayed between the start and the end date." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json

@@ -6,6 +6,7 @@
       "description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
     },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "dateSeparator": { "description": "String displayed between the start and the end date." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json

@@ -6,6 +6,7 @@
       "description": "If <code>true</code>, the <code>input</code> element is focused during the first mount."
     },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "dateSeparator": { "description": "String displayed between the start and the end date." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json

@@ -10,6 +10,7 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
     },
+    "dateSeparator": { "description": "String displayed between the start and the end date." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json

@@ -11,6 +11,7 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
     },
+    "dateSeparator": { "description": "String displayed between the start and the end date." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json

@@ -11,6 +11,7 @@
     "color": {
       "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
     },
+    "dateSeparator": { "description": "String displayed between the start and the end date." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx

@@ -54,14 +54,11 @@ const MultiInputDateRangeFieldRoot = styled(
   },
 )({});
 
-const MultiInputDateRangeFieldSeparator = styled(
-  (props: TypographyProps) => <Typography {...props}>{props.children ?? ' – '}</Typography>,
-  {
-    name: 'MuiMultiInputDateRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({});
+const MultiInputDateRangeFieldSeparator = styled(Typography, {
+  name: 'MuiMultiInputDateRangeField',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator,
+})({});
 
 type MultiInputDateRangeFieldComponent = (<
   TDate extends PickerValidDate,
@@ -154,6 +151,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });
@@ -197,6 +197,11 @@ MultiInputDateRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end date.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx

@@ -52,14 +52,11 @@ const MultiInputDateTimeRangeFieldRoot = styled(
   },
 )({});
 
-const MultiInputDateTimeRangeFieldSeparator = styled(
-  (props: TypographyProps) => <Typography {...props}>{props.children ?? ' – '}</Typography>,
-  {
-    name: 'MuiMultiInputDateTimeRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({});
+const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
+  name: 'MuiMultiInputDateTimeRangeField',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator,
+})({});
 
 type MultiInputDateTimeRangeFieldComponent = (<
   TDate extends PickerValidDate,
@@ -152,6 +149,9 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });
@@ -200,6 +200,11 @@ MultiInputDateTimeRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end date.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx

@@ -54,14 +54,11 @@ const MultiInputTimeRangeFieldRoot = styled(
   },
 )({});
 
-const MultiInputTimeRangeFieldSeparator = styled(
-  (props: TypographyProps) => <Typography {...props}>{props.children ?? ' – '}</Typography>,
-  {
-    name: 'MuiMultiInputTimeRangeField',
-    slot: 'Separator',
-    overridesResolver: (props, styles) => styles.separator,
-  },
-)({});
+const MultiInputTimeRangeFieldSeparator = styled(Typography, {
+  name: 'MuiMultiInputTimeRangeField',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator,
+})({});
 
 type MultiInputTimeRangeFieldComponent = (<
   TDate extends PickerValidDate,
@@ -155,6 +152,9 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });
@@ -203,6 +203,11 @@ MultiInputTimeRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end date.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx

@@ -105,6 +105,11 @@ SingleInputDateRangeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end date.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts

@@ -9,7 +9,7 @@ import {
   UseClearableFieldSlotProps,
 } from '@mui/x-date-pickers/hooks';
 import { UseDateRangeFieldProps } from '../internals/models';
-import type { DateRange, RangeFieldSection, DateRangeValidationError } from '../models';
+import { DateRange, RangeFieldSection, DateRangeValidationError } from '../models';
 
 export interface UseSingleInputDateRangeFieldProps<
   TDate extends PickerValidDate,

packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts

@@ -1,11 +1,12 @@
+import * as React from 'react';
 import {
   useField,
   splitFieldInternalAndForwardedProps,
   useDefaultizedDateField,
 } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateRange } from '../internals/utils/validation/validateDateRange';
 import { RangeFieldSection, DateRange } from '../models';
 
@@ -27,6 +28,11 @@ export const useSingleInputDateRangeField = <
     keyof UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>
   >(props, 'date');
 
+  const fieldValueManager = React.useMemo(
+    () => getRangeFieldValueManager<TDate>({ dateSeparator: internalProps.dateSeparator }),
+    [internalProps.dateSeparator],
+  );
+
   return useField<
     DateRange<TDate>,
     TDate,
@@ -38,7 +44,7 @@ export const useSingleInputDateRangeField = <
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateDateRange,
     valueType: 'date',
   });

packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx

@@ -110,6 +110,11 @@ SingleInputDateTimeRangeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end date.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */