Skip to content

Commit 608f61e

Browse files
flaviendelangleflaviendelangle
committed
[pickers] Make the single input field the default field on range pickers
1 parent e56a381 commit 608f61e

File tree

68 files changed

+373
-275
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+373
-275
lines changed

‎docs/data/date-pickers/base-concepts/ComponentFamilies.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
77
import { DateField } from '@mui/x-date-pickers/DateField';
88
import { TimeField } from '@mui/x-date-pickers/TimeField';
99
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';
10-
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
11-
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
12-
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
10+
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
11+
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';
12+
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';
1313
import Stack from '@mui/material/Stack';
1414
import Tooltip from '@mui/material/Tooltip';
1515

@@ -49,9 +49,9 @@ export default function ComponentFamilies() {
4949
'DateField',
5050
'TimeField',
5151
'DateTimeField',
52-
'MultiInputDateRangeField',
53-
'MultiInputTimeRangeField',
54-
'MultiInputDateTimeRangeField',
52+
'SingleInputDateRangeField',
53+
'SingleInputTimeRangeField',
54+
'SingleInputDateTimeRangeField',
5555
]}
5656
>
5757
<DemoItem label="Date">
@@ -65,25 +65,25 @@ export default function ComponentFamilies() {
6565
</DemoItem>
6666
<DemoItem
6767
label={<ProLabel>Date Range</ProLabel>}
68-
component="MultiInputDateRangeField"
68+
component="SingleInputDateRangeField"
6969
>
70-
<MultiInputDateRangeField
70+
<SingleInputDateRangeField
7171
defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
7272
/>
7373
</DemoItem>
7474
<DemoItem
7575
label={<ProLabel>Time Range</ProLabel>}
76-
component="MultiInputTimeRangeField"
76+
component="SingleInputTimeRangeField"
7777
>
78-
<MultiInputTimeRangeField
78+
<SingleInputTimeRangeField
7979
defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
8080
/>
8181
</DemoItem>
8282
<DemoItem
8383
label={<ProLabel>Date Time Range</ProLabel>}
84-
component="MultiInputDateTimeRangeField"
84+
component="SingleInputDateTimeRangeField"
8585
>
86-
<MultiInputDateTimeRangeField
86+
<SingleInputDateTimeRangeField
8787
defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
8888
/>
8989
</DemoItem>

‎docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js

+2
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ function BrowserMultiInputDateRangeField(props) {
116116
);
117117
}
118118

119+
BrowserMultiInputDateRangeField.fieldType = 'multi-input';
120+
119121
function BrowserDateRangePicker(props) {
120122
return (
121123
<DateRangePicker

‎docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ function BrowserMultiInputDateRangeField(
153153
);
154154
}
155155

156+
BrowserMultiInputDateRangeField.fieldType = 'multi-input';
157+
156158
function BrowserDateRangePicker(props: DateRangePickerProps) {
157159
return (
158160
<DateRangePicker

‎docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js

+2
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ function JoyMultiInputDateRangeField(props) {
105105
);
106106
}
107107

108+
JoyMultiInputDateRangeField.fieldType = 'multi-input';
109+
108110
function JoyDateRangePicker(props) {
109111
return (
110112
<DateRangePicker

‎docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,8 @@ function JoyMultiInputDateRangeField(props: JoyMultiInputDateRangeFieldProps) {
135135
);
136136
}
137137

138+
JoyMultiInputDateRangeField.fieldType = 'multi-input';
139+
138140
function JoyDateRangePicker(props: DateRangePickerProps) {
139141
return (
140142
<DateRangePicker

‎docs/data/date-pickers/custom-field/SingleInputDateRangePicker.js ‎docs/data/date-pickers/custom-field/MultiInputDateRangePicker.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import * as React from 'react';
22
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
33
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
44
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
5-
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
5+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
66
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
77

8-
export default function SingleInputDateRangePicker() {
8+
export default function MultiInputDateRangePicker() {
99
return (
1010
<LocalizationProvider dateAdapter={AdapterDayjs}>
11-
<DemoContainer components={['SingleInputDateRangeField']}>
12-
<DateRangePicker slots={{ field: SingleInputDateRangeField }} />
11+
<DemoContainer components={['MultiInputDateRangeField']}>
12+
<DateRangePicker slots={{ field: MultiInputDateRangeField }} />
1313
</DemoContainer>
1414
</LocalizationProvider>
1515
);

‎docs/data/date-pickers/custom-field/SingleInputDateRangePicker.tsx ‎docs/data/date-pickers/custom-field/MultiInputDateRangePicker.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import * as React from 'react';
22
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
33
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
44
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
5-
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
5+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
66
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
77

8-
export default function SingleInputDateRangePicker() {
8+
export default function MultiInputDateRangePicker() {
99
return (
1010
<LocalizationProvider dateAdapter={AdapterDayjs}>
11-
<DemoContainer components={['SingleInputDateRangeField']}>
12-
<DateRangePicker slots={{ field: SingleInputDateRangeField }} />
11+
<DemoContainer components={['MultiInputDateRangeField']}>
12+
<DateRangePicker slots={{ field: MultiInputDateRangeField }} />
1313
</DemoContainer>
1414
</LocalizationProvider>
1515
);

‎docs/data/date-pickers/custom-field/MultiInputDateRangePicker.tsx.preview

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<DateRangePicker slots={{ field: MultiInputDateRangeField }} />

‎docs/data/date-pickers/custom-field/MultiInputDateRangePickerWrapped.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
3+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
4+
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
5+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
6+
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
7+
8+
function WrappedMultiInputDateRangeField(props) {
9+
return <MultiInputDateRangeField spacing={4} {...props} />;
10+
}
11+
12+
WrappedMultiInputDateRangeField.fieldType = 'multi-input';
13+
14+
export default function MultiInputDateRangePickerWrapped() {
15+
return (
16+
<LocalizationProvider dateAdapter={AdapterDayjs}>
17+
<DemoContainer components={['MultiInputDateRangeField']}>
18+
<DateRangePicker slots={{ field: WrappedMultiInputDateRangeField }} />
19+
</DemoContainer>
20+
</LocalizationProvider>
21+
);
22+
}

‎docs/data/date-pickers/custom-field/MultiInputDateRangePickerWrapped.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
3+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
4+
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
5+
import {
6+
MultiInputDateRangeField,
7+
MultiInputDateRangeFieldProps,
8+
} from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
9+
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
10+
11+
function WrappedMultiInputDateRangeField(
12+
props: MultiInputDateRangeFieldProps<true>,
13+
) {
14+
return <MultiInputDateRangeField spacing={4} {...props} />;
15+
}
16+
17+
WrappedMultiInputDateRangeField.fieldType = 'multi-input';
18+
19+
export default function MultiInputDateRangePickerWrapped() {
20+
return (
21+
<LocalizationProvider dateAdapter={AdapterDayjs}>
22+
<DemoContainer components={['MultiInputDateRangeField']}>
23+
<DateRangePicker slots={{ field: WrappedMultiInputDateRangeField }} />
24+
</DemoContainer>
25+
</LocalizationProvider>
26+
);
27+
}

‎docs/data/date-pickers/custom-field/MultiInputDateRangePickerWrapped.tsx.preview

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<DateRangePicker slots={{ field: WrappedMultiInputDateRangeField }} />

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
33
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
44
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
55
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
6+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
67

78
export default function MultiInputFieldSeparatorSlotProps() {
89
return (
910
<LocalizationProvider dateAdapter={AdapterDayjs}>
1011
<DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
11-
<DateRangePicker slotProps={{ fieldSeparator: { variant: 'body2' } }} />
12-
<DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
12+
<MultiInputDateRangeField
13+
slotProps={{ separator: { sx: { opacity: 0.5 } } }}
14+
/>
15+
<DateRangePicker
16+
slotProps={{
17+
field: { slotProps: { separator: { sx: { opacity: 0.5 } } } },
18+
}}
19+
slots={{ field: MultiInputDateRangeField }}
20+
/>
1321
</DemoContainer>
1422
</LocalizationProvider>
1523
);

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
33
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
44
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
55
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
6+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
67

78
export default function MultiInputFieldSeparatorSlotProps() {
89
return (
910
<LocalizationProvider dateAdapter={AdapterDayjs}>
1011
<DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
11-
<DateRangePicker slotProps={{ fieldSeparator: { variant: 'body2' } }} />
12-
<DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
12+
<MultiInputDateRangeField
13+
slotProps={{ separator: { sx: { opacity: 0.5 } } }}
14+
/>
15+
<DateRangePicker
16+
slotProps={{
17+
field: { slotProps: { separator: { sx: { opacity: 0.5 } } } } as any,
18+
}}
19+
slots={{ field: MultiInputDateRangeField }}
20+
/>
1321
</DemoContainer>
1422
</LocalizationProvider>
1523
);

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1-
<DateRangePicker slotProps={{ fieldSeparator: { variant: 'body2' } }} />
2-
<DateRangePicker slotProps={{ fieldSeparator: { sx: { opacity: 0.5 } } }} />
1+
<MultiInputDateRangeField
2+
slotProps={{ separator: { sx: { opacity: 0.5 } } }}
3+
/>
4+
<DateRangePicker
5+
slotProps={{
6+
field: { slotProps: { separator: { sx: { opacity: 0.5 } } } } as any,
7+
}}
8+
slots={{ field: MultiInputDateRangeField }}
9+
/>

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

+15
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,24 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
44
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
55
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
66
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
7+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
78

89
export default function MultiInputFieldTextFieldProps() {
910
return (
1011
<LocalizationProvider dateAdapter={AdapterDayjs}>
12+
<DemoContainer
13+
components={['MultiInputDateRangeField', 'MultiInputDateRangeField']}
14+
>
15+
<MultiInputDateRangeField
16+
slotProps={{
17+
textField: ({ position }) => ({
18+
color: position === 'start' ? 'success' : 'warning',
19+
focused: true,
20+
}),
21+
}}
22+
defaultValue={[dayjs('2022-04-17'), null]}
23+
/>
24+
</DemoContainer>
1125
<DemoContainer components={['DateRangePicker']}>
1226
<DateRangePicker
1327
slotProps={{
@@ -16,6 +30,7 @@ export default function MultiInputFieldTextFieldProps() {
1630
focused: true,
1731
}),
1832
}}
33+
slots={{ field: MultiInputDateRangeField }}
1934
defaultValue={[dayjs('2022-04-17'), null]}
2035
/>
2136
</DemoContainer>

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

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,31 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
44
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
55
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
66
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
7+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
78

89
export default function MultiInputFieldTextFieldProps() {
910
return (
1011
<LocalizationProvider dateAdapter={AdapterDayjs}>
11-
<DemoContainer components={['DateRangePicker']}>
12+
<DemoContainer
13+
components={['MultiInputDateRangeField', 'MultiInputDateRangeField']}
14+
>
15+
<MultiInputDateRangeField
16+
slotProps={{
17+
textField: ({ position }) => ({
18+
color: position === 'start' ? 'success' : 'warning',
19+
focused: true,
20+
}),
21+
}}
22+
defaultValue={[dayjs('2022-04-17'), null]}
23+
/>
1224
<DateRangePicker
1325
slotProps={{
1426
textField: ({ position }) => ({
1527
color: position === 'start' ? 'success' : 'warning',
1628
focused: true,
1729
}),
1830
}}
31+
slots={{ field: MultiInputDateRangeField }}
1932
defaultValue={[dayjs('2022-04-17'), null]}
2033
/>
2134
</DemoContainer>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
33
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
44
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
55
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
6-
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
6+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
77

88
export default function RangeFieldDateSeparator() {
99
return (
@@ -12,7 +12,7 @@ export default function RangeFieldDateSeparator() {
1212
<DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
1313
<DateRangePicker
1414
slotProps={{ field: { dateSeparator: 'to' } }}
15-
slots={{ field: SingleInputDateRangeField }}
15+
slots={{ field: MultiInputDateRangeField }}
1616
/>
1717
</DemoContainer>
1818
</LocalizationProvider>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
33
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
44
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
55
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
6-
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
6+
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
77

88
export default function RangeFieldDateSeparator() {
99
return (
@@ -12,7 +12,7 @@ export default function RangeFieldDateSeparator() {
1212
<DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
1313
<DateRangePicker
1414
slotProps={{ field: { dateSeparator: 'to' } }}
15-
slots={{ field: SingleInputDateRangeField }}
15+
slots={{ field: MultiInputDateRangeField }}
1616
/>
1717
</DemoContainer>
1818
</LocalizationProvider>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
22
<DateRangePicker
33
slotProps={{ field: { dateSeparator: 'to' } }}
4-
slots={{ field: SingleInputDateRangeField }}
4+
slots={{ field: MultiInputDateRangeField }}
55
/>

‎docs/data/date-pickers/custom-field/SingleInputDateRangePicker.tsx.preview

-1
This file was deleted.

‎docs/data/date-pickers/custom-field/SingleInputDateRangePickerWithAdornment.js

-20
This file was deleted.

0 commit comments

Comments
 (0)