From ef5143db5fee707622760d4723708a9897b919b4 Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 22 Feb 2024 15:15:24 +0100 Subject: [PATCH 1/6] [fields] New prop dateSeparator on range fields --- .../MultiInputFieldSeparatorSlotProps.js | 2 +- .../MultiInputFieldSeparatorSlotProps.tsx | 2 +- ...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 ++++++- .../multi-input-date-range-field.json | 1 + .../multi-input-date-time-range-field.json | 1 + .../multi-input-time-range-field.json | 1 + .../single-input-date-range-field.json | 1 + .../single-input-date-time-range-field.json | 1 + .../single-input-time-range-field.json | 1 + .../multi-input-date-range-field.json | 1 + .../multi-input-date-time-range-field.json | 1 + .../multi-input-time-range-field.json | 1 + .../single-input-date-range-field.json | 1 + .../single-input-date-time-range-field.json | 1 + .../single-input-time-range-field.json | 1 + .../MultiInputDateRangeField.tsx | 23 +++++++++++-------- .../MultiInputDateTimeRangeField.tsx | 23 +++++++++++-------- .../MultiInputTimeRangeField.tsx | 23 +++++++++++-------- .../SingleInputDateRangeField.tsx | 5 ++++ .../SingleInputDateRangeField.types.ts | 2 +- .../useSingleInputDateRangeField.ts | 10 ++++++-- .../SingleInputDateTimeRangeField.tsx | 5 ++++ .../useSingleInputDateTimeRangeField.ts | 10 ++++++-- .../SingleInputTimeRangeField.tsx | 5 ++++ .../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 + scripts/x-date-pickers-pro.exports.json | 1 + 36 files changed, 197 insertions(+), 53 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..0b4c0bff2af90 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx @@ -8,7 +8,7 @@ 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..6c39cc8d08fcd --- /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..916dd54d45056 --- /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/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index 81aa049a9cf74..6ac27db9ea703 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/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": { diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index 7c3409b379817..82462976a3f1f 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/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": { diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index 7eaa36103979b..9119c6dcc2818 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/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": { diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index edcc1144f2fa5..697d60d0ef899 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/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" }, diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 34b899ca07dad..3fe2a80977788 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/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" }, diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 5a450b178c85d..d04206f9390c6 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/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" }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json index fde01a7e1b8d1..777c378ec7984 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json @@ -5,6 +5,7 @@ "description": "If true, the input 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." }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json index c06fd6bdb2613..061a52a0d3181 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json +++ b/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 true, the input 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." }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json index 4adf72573ec25..91ef53993797e 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json @@ -6,6 +6,7 @@ "description": "If true, the input 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." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json index 04844904a07e3..fe5bb1fa9f94d 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json +++ b/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 palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end date." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json index 61340a97f9b64..d5e3ace49111f 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json +++ b/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 palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end date." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json index afe1273696503..e005b1d64bd36 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json +++ b/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 palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end date." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 640f42f6036b9..e8d1d7404e00c 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/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) => {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, }); @@ -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. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 28ace8cfa6ad2..6ac141895f7aa 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/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) => {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, }); @@ -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. */ diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 593a224064a80..aa5a4b65f3a19 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/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) => {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, }); @@ -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. */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index d758ed6ea40fc..244365dac6ad4 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/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. */ 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/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 7b86fc27045bb..f0a857f4a9ede 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/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. */ 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/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index a9789bd0e0473..51ceed8b30cb3 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -110,6 +110,11 @@ SingleInputTimeRangeField.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. */ 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 = < diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index eb08c40047352..0ac4f08efa379 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -323,6 +323,7 @@ { "name": "PickerValidDate", "kind": "TypeAlias" }, { "name": "PickerValidDateLookup", "kind": "Interface" }, { "name": "RangeFieldSection", "kind": "Interface" }, + { "name": "RangeFieldSeparatorProps", "kind": "Interface" }, { "name": "RangePosition", "kind": "TypeAlias" }, { "name": "renderDateRangeViewCalendar", "kind": "Variable" }, { "name": "renderDateViewCalendar", "kind": "Variable" }, From 02f403056b720d0b0ed650c044f985bd279a2738 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 18 Mar 2024 15:04:22 +0100 Subject: [PATCH 2/6] Update packages/x-date-pickers-pro/src/models/fields.ts Co-authored-by: Lukas Signed-off-by: Flavien DELANGLE --- packages/x-date-pickers-pro/src/models/fields.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts index 8d70253c2f649..7bb292bc8e511 100644 --- a/packages/x-date-pickers-pro/src/models/fields.ts +++ b/packages/x-date-pickers-pro/src/models/fields.ts @@ -49,7 +49,7 @@ export interface MultiInputFieldRefs { export interface RangeFieldSeparatorProps { /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator?: string; From a2ac7abe3271d5f4b1c046750b30e433508dcf11 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 18 Mar 2024 15:04:51 +0100 Subject: [PATCH 3/6] Update docs/data/date-pickers/custom-field/custom-field.md Co-authored-by: Lukas Signed-off-by: Flavien DELANGLE --- docs/data/date-pickers/custom-field/custom-field.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index da63f4bc65ddf..81438b384a3ca 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -51,7 +51,7 @@ This adornment is purely decorative, the focus remains on the field when the pic ### 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`: +You can use the `dateSeparator` prop to change the separator rendered between the start and end dates: {{"demo": "RangeFieldDateSeparator.js"}} From 15362c5d988208d8ea6d7fdf9d9fbec90fe410b6 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 18 Mar 2024 15:24:22 +0100 Subject: [PATCH 4/6] Fix --- .../multi-input-date-range-field.json | 2 +- .../multi-input-date-time-range-field.json | 2 +- .../multi-input-time-range-field.json | 2 +- .../single-input-date-range-field.json | 2 +- .../single-input-date-time-range-field.json | 2 +- .../single-input-time-range-field.json | 2 +- .../src/MultiInputDateRangeField/MultiInputDateRangeField.tsx | 2 +- .../MultiInputDateTimeRangeField.tsx | 2 +- .../src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx | 2 +- .../src/SingleInputDateRangeField/SingleInputDateRangeField.tsx | 2 +- .../SingleInputDateTimeRangeField.tsx | 2 +- .../src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json index 777c378ec7984..5f55eea47ea79 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json @@ -5,7 +5,7 @@ "description": "If true, the input 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." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json index 061a52a0d3181..e0b8aed8e717d 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json @@ -6,7 +6,7 @@ "description": "If true, the input 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." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json index 91ef53993797e..36121c5af67de 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json @@ -6,7 +6,7 @@ "description": "If true, the input 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." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json index fe5bb1fa9f94d..3e68a0f3d2234 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json @@ -10,7 +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 palette customization guide." }, - "dateSeparator": { "description": "String displayed between the start and the end date." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json index d5e3ace49111f..1b2f084a95cad 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json @@ -11,7 +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 palette customization guide." }, - "dateSeparator": { "description": "String displayed between the start and the end date." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json index e005b1d64bd36..d14d95e0e73be 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json @@ -11,7 +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 palette customization guide." }, - "dateSeparator": { "description": "String displayed between the start and the end date." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 2a3f8678169b6..bbf5cc3cad63f 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -200,7 +200,7 @@ MultiInputDateRangeField.propTypes = { className: PropTypes.string, component: PropTypes.elementType, /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator: PropTypes.string, diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index eb2bfb6749991..29869ff685042 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -203,7 +203,7 @@ MultiInputDateTimeRangeField.propTypes = { className: PropTypes.string, component: PropTypes.elementType, /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator: PropTypes.string, diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 9be9b1f2d3bea..c86686d723c54 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -206,7 +206,7 @@ MultiInputTimeRangeField.propTypes = { className: PropTypes.string, component: PropTypes.elementType, /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator: PropTypes.string, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 244365dac6ad4..72144b1ad2ba6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -106,7 +106,7 @@ SingleInputDateRangeField.propTypes = { color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), component: PropTypes.elementType, /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator: PropTypes.string, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index f0a857f4a9ede..ba9f07c0d76ca 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -111,7 +111,7 @@ SingleInputDateTimeRangeField.propTypes = { color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), component: PropTypes.elementType, /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator: PropTypes.string, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 51ceed8b30cb3..d7dc77c6c6fe0 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -111,7 +111,7 @@ SingleInputTimeRangeField.propTypes = { color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), component: PropTypes.elementType, /** - * String displayed between the start and the end date. + * String displayed between the start and the end dates. * @default "–" */ dateSeparator: PropTypes.string, From e21466e9ea008acd7527f5483522c00714462d0e Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 18 Mar 2024 15:48:30 +0100 Subject: [PATCH 5/6] Review: Lukas --- .../custom-field/MultiInputFieldSeparatorSlotProps.js | 2 +- .../custom-field/MultiInputFieldSeparatorSlotProps.tsx | 2 +- .../custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js index 0b4c0bff2af90..7d27a3a3220d0 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 0b4c0bff2af90..7d27a3a3220d0 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx @@ -8,7 +8,7 @@ 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 54c7c81aff913..079351c0f2759 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 From f29d30ebdaf42da7984c97e9c4bdb44f5ff9b402 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 18 Mar 2024 17:38:43 +0100 Subject: [PATCH 6/6] Fix --- .../SingleInputDateRangeField.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b886e85563667..e53a975bd6743 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 { DateRange, RangeFieldSection, DateRangeValidationError } from '../models'; +import type { DateRange, RangeFieldSection, DateRangeValidationError } from '../models'; export interface UseSingleInputDateRangeFieldProps< TDate extends PickerValidDate,