[fields] Allow to override the separator between the start and the en…

…d date in all range fields (#12174)

Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com>
Co-authored-by: Lukas <llukas.tyla@gmail.com>

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: { variant: 'body2' } }} />
         <DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
       </DemoContainer>
     </LocalizationProvider>

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

@@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
-        <DateRangePicker slotProps={{ fieldSeparator: { children: 'to' } }} />
+        <DateRangePicker slotProps={{ fieldSeparator: { variant: 'body2' } }} />
         <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: { variant: 'body2' } }} />
 <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 start and end dates:
+
+{{"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 dates." },
     "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 dates." },
     "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 dates." },
     "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 dates." },
     "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 dates." },
     "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 dates." },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Stack, { StackProps } from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import {
@@ -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,
+})({
   lineHeight: '1.4375em', // 23px
 });
 
@@ -156,6 +153,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });
@@ -199,6 +199,11 @@ MultiInputDateRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Stack, { StackProps } from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import {
@@ -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,
+})({
   lineHeight: '1.4375em', // 23px
 });
 
@@ -154,6 +151,9 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });
@@ -202,6 +202,11 @@ MultiInputDateTimeRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { clsx } from 'clsx';
 import Stack, { StackProps } from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import {
@@ -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,
+})({
   lineHeight: '1.4375em', // 23px
 });
 
@@ -157,6 +154,9 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
+    additionalProps: {
+      children: ` ${internalProps.dateSeparator ?? '–'} `,
+    },
     ownerState,
     className: classes.separator,
   });
@@ -205,6 +205,11 @@ MultiInputTimeRangeField.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @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 dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

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',
   });