From 95db04c31d5f1da1eb26df177aac342d1241920c Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 22 Feb 2024 15:15:24 +0100 Subject: [PATCH] [fields] New prop dateSeparator on range fields --- .../MultiInputFieldSeparatorSlotProps.js | 2 +- .../MultiInputFieldSeparatorSlotProps.tsx | 4 +++- ...tiInputFieldSeparatorSlotProps.tsx.preview | 2 +- .../custom-field/RangeFieldDateSeparator.js | 20 +++++++++++++++++ .../custom-field/RangeFieldDateSeparator.tsx | 20 +++++++++++++++++ .../RangeFieldDateSeparator.tsx.preview | 5 +++++ .../date-pickers/custom-field/custom-field.md | 8 ++++++- .../MultiInputDateRangeField.tsx | 16 +++++++------- .../MultiInputDateTimeRangeField.tsx | 16 +++++++------- .../MultiInputTimeRangeField.tsx | 16 +++++++------- .../SingleInputDateRangeField.types.ts | 2 +- .../useSingleInputDateRangeField.ts | 10 +++++++-- .../useSingleInputDateTimeRangeField.ts | 10 +++++++-- .../useSingleInputTimeRangeField.ts | 10 +++++++-- .../src/internals/models/dateRange.ts | 8 ++++++- .../src/internals/models/dateTimeRange.ts | 8 ++++++- .../src/internals/models/timeRange.ts | 8 ++++++- .../src/internals/utils/valueManagers.ts | 22 +++++++++++-------- .../x-date-pickers-pro/src/models/fields.ts | 15 ++++++++++--- .../src/internals/utils/fields.ts | 1 + 20 files changed, 153 insertions(+), 50 deletions(-) create mode 100644 docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js create mode 100644 docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx create mode 100644 docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js index 37a41e39987e3..0b4c0bff2af90 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js @@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() { return ( - + diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx index 37a41e39987e3..d05798276a76c 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx @@ -8,7 +8,9 @@ export default function MultiInputFieldSeparatorSlotProps() { return ( - + diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview index b912174c22804..54c7c81aff913 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview @@ -1,2 +1,2 @@ - + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js new file mode 100644 index 0000000000000..8582d922b09aa --- /dev/null +++ b/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 ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx new file mode 100644 index 0000000000000..6c39cc8d08fcd --- /dev/null +++ b/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 ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview new file mode 100644 index 0000000000000..5fb417782fb8b --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 302cde45d08c8..da63f4bc65ddf 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/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 [](/x/introduction/licensing/#pro-plan 'Pro plan') +### Customize the separator of multi input range fields [](/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 [](/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. diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 640f42f6036b9..852ba37097d64 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -54,14 +54,11 @@ const MultiInputDateRangeFieldRoot = styled( }, )({}); -const MultiInputDateRangeFieldSeparator = styled( - (props: TypographyProps) => {props.children ?? ' – '}, - { - 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, }); diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 28ace8cfa6ad2..92ead9381c036 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -52,14 +52,11 @@ const MultiInputDateTimeRangeFieldRoot = styled( }, )({}); -const MultiInputDateTimeRangeFieldSeparator = styled( - (props: TypographyProps) => {props.children ?? ' – '}, - { - 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, }); diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 593a224064a80..b317d76c0ab22 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -54,14 +54,11 @@ const MultiInputTimeRangeFieldRoot = styled( }, )({}); -const MultiInputTimeRangeFieldSeparator = styled( - (props: TypographyProps) => {props.children ?? ' – '}, - { - 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, }); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index e53a975bd6743..b886e85563667 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/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, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts index d328ad1d1d7f1..acd9177c5fa67 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useField, splitFieldInternalAndForwardedProps, @@ -5,7 +6,7 @@ import { } 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 >(props, 'date'); + const fieldValueManager = React.useMemo( + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + [internalProps.dateSeparator], + ); + return useField< DateRange, TDate, @@ -38,7 +44,7 @@ export const useSingleInputDateRangeField = < forwardedProps, internalProps, valueManager: rangeValueManager, - fieldValueManager: rangeFieldValueManager, + fieldValueManager, validator: validateDateRange, valueType: 'date', }); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts index b7c796ba8abad..c27ab9b259b30 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useField, splitFieldInternalAndForwardedProps, @@ -5,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; -import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; +import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateDateTimeRange } from '../internals/utils/validation/validateDateTimeRange'; import { RangeFieldSection, DateRange } from '../models'; @@ -30,6 +31,11 @@ export const useSingleInputDateTimeRangeField = < keyof UseSingleInputDateTimeRangeFieldProps >(props, 'date-time'); + const fieldValueManager = React.useMemo( + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + [internalProps.dateSeparator], + ); + return useField< DateRange, TDate, @@ -41,7 +47,7 @@ export const useSingleInputDateTimeRangeField = < forwardedProps, internalProps, valueManager: rangeValueManager, - fieldValueManager: rangeFieldValueManager, + fieldValueManager, validator: validateDateTimeRange, valueType: 'date-time', }); diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts index 0b8da45b33146..98d9703e7eb85 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { useField, splitFieldInternalAndForwardedProps, @@ -5,7 +6,7 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; -import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers'; +import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers'; import { validateTimeRange } from '../internals/utils/validation/validateTimeRange'; import { RangeFieldSection, DateRange } from '../models'; @@ -27,6 +28,11 @@ export const useSingleInputTimeRangeField = < keyof UseSingleInputTimeRangeFieldProps >(props, 'time'); + const fieldValueManager = React.useMemo( + () => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }), + [internalProps.dateSeparator], + ); + return useField< DateRange, TDate, @@ -38,7 +44,7 @@ export const useSingleInputTimeRangeField = < forwardedProps, internalProps, valueManager: rangeValueManager, - fieldValueManager: rangeFieldValueManager, + fieldValueManager, validator: validateTimeRange, valueType: 'time', }); diff --git a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts index f1ac7d14580ba..c59027895dd52 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateRange.ts @@ -4,7 +4,12 @@ import { UseFieldInternalProps, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; -import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models'; +import { + DateRangeValidationError, + RangeFieldSection, + DateRange, + RangeFieldSeparatorProps, +} from '../../models'; /** * Props used to validate a day value in range pickers. @@ -39,5 +44,6 @@ export interface UseDateRangeFieldProps< >, 'format' >, + RangeFieldSeparatorProps, DayRangeValidationProps, BaseDateValidationProps {} diff --git a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts index aeb49c239f773..b1a8bbe3fa931 100644 --- a/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/dateTimeRange.ts @@ -8,7 +8,12 @@ import { } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; import { DayRangeValidationProps } from './dateRange'; -import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models'; +import { + DateTimeRangeValidationError, + RangeFieldSection, + DateRange, + RangeFieldSeparatorProps, +} from '../../models'; export interface UseDateTimeRangeFieldProps< TDate extends PickerValidDate, @@ -26,6 +31,7 @@ export interface UseDateTimeRangeFieldProps< >, 'format' >, + RangeFieldSeparatorProps, DayRangeValidationProps, TimeValidationProps, BaseDateValidationProps, diff --git a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts index 09cf4f179dd5f..2ef5443f3da3b 100644 --- a/packages/x-date-pickers-pro/src/internals/models/timeRange.ts +++ b/packages/x-date-pickers-pro/src/internals/models/timeRange.ts @@ -5,7 +5,12 @@ import { UseFieldInternalProps, } from '@mui/x-date-pickers/internals'; import { PickerValidDate } from '@mui/x-date-pickers/models'; -import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models'; +import { + TimeRangeValidationError, + RangeFieldSection, + DateRange, + RangeFieldSeparatorProps, +} from '../../models'; export interface UseTimeRangeFieldProps< TDate extends PickerValidDate, @@ -23,6 +28,7 @@ export interface UseTimeRangeFieldProps< >, 'format' >, + RangeFieldSeparatorProps, TimeValidationProps, BaseTimeValidationProps { /** diff --git a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts index 9fe081690daf2..b3dc56a8d2ce3 100644 --- a/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts +++ b/packages/x-date-pickers-pro/src/internals/utils/valueManagers.ts @@ -74,7 +74,11 @@ export const rangeValueManager: RangePickerValueManager = { ], }; -export const rangeFieldValueManager: FieldValueManager, any, RangeFieldSection> = { +export const getRangeFieldValueManager = ({ + dateSeparator = '–', +}: { + dateSeparator: string | undefined; +}): FieldValueManager, TDate, RangeFieldSection> => ({ updateReferenceValue: (utils, value, prevReferenceValue) => { const shouldKeepStartDate = value[0] != null && utils.isValid(value[0]); const shouldKeepEndDate = value[1] != null && utils.isValid(value[1]); @@ -117,7 +121,7 @@ export const rangeFieldValueManager: FieldValueManager, any, Rang ...section, dateName: position, // TODO: Check if RTL still works - endSeparator: `${section.endSeparator} – `, + endSeparator: `${section.endSeparator} ${dateSeparator} `, }; } @@ -149,26 +153,26 @@ export const rangeFieldValueManager: FieldValueManager, any, Rang ); }, parseValueStr: (valueStr, referenceValue, parseDate) => { - // TODO: Improve because it would not work if the date format has `–` as a separator. - const [startStr, endStr] = valueStr.split('–'); + // TODO: Improve because it would not work if some section have the same separator as the dateSeparator. + const [startStr, endStr] = valueStr.split(dateSeparator); return [startStr, endStr].map((dateStr, index) => { if (dateStr == null) { return null; } - return parseDate(dateStr.trim(), referenceValue[index]); + return parseDate(dateStr.trim(), referenceValue[index]!); }) as DateRange; }, getActiveDateManager: (utils, state, activeSection) => { const index = activeSection.dateName === 'start' ? 0 : 1; - const updateDateInRange = (newDate: any, prevDateRange: DateRange) => - (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as DateRange; + const updateDateInRange = (newDate: TDate | null, prevDateRange: DateRange) => + (index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate]) as DateRange; return { date: state.value[index], - referenceDate: state.referenceValue[index], + referenceDate: state.referenceValue[index]!, getSections: (sections) => { const dateRangeSections = splitDateRangeSections(sections); if (index === 0) { @@ -186,4 +190,4 @@ export const rangeFieldValueManager: FieldValueManager, any, Rang }), }; }, -}; +}); diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index 8bc89688a769f..8d70253c2f649 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -47,6 +47,14 @@ export interface MultiInputFieldRefs { unstableEndFieldRef?: React.Ref>; } +export interface RangeFieldSeparatorProps { + /** + * String displayed between the start and the end date. + * @default "–" + */ + dateSeparator?: string; +} + /** * Props the multi input field can receive when used inside a picker. * Only contains what the MUI components are passing to the field, @@ -59,9 +67,10 @@ export interface BaseMultiInputFieldProps< TEnableAccessibleFieldDOMStructure extends boolean, TError, > extends Omit< - BaseFieldProps, - 'unstableFieldRef' - > { + BaseFieldProps, + 'unstableFieldRef' + >, + RangeFieldSeparatorProps { sx?: SxProps; unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; diff --git a/packages/x-date-pickers/src/internals/utils/fields.ts b/packages/x-date-pickers/src/internals/utils/fields.ts index 1839ff03acfb8..ef5e19e58f089 100644 --- a/packages/x-date-pickers/src/internals/utils/fields.ts +++ b/packages/x-date-pickers/src/internals/utils/fields.ts @@ -21,6 +21,7 @@ const SHARED_FIELD_INTERNAL_PROP_NAMES = [ 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', + 'dateSeparator', ] as const; export const splitFieldInternalAndForwardedProps = <