Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pickers] Add DateTimeRangePicker component #9528

Merged
merged 178 commits into from
Jan 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
178 commits
Select commit Hold shift + click to select a range
ce6a3e0
start
LukasTy Jun 29, 2023
bc7bc2b
Fix views
LukasTy Jun 30, 2023
0e5d52d
Experiment with `rendererInterceptor`
LukasTy Jun 30, 2023
78e148c
Fix build
LukasTy Jun 30, 2023
33a4c33
Add time wrapper
LukasTy Jun 30, 2023
fa6ac25
Reuse existing time view renderers
LukasTy Jul 3, 2023
9ab14ac
Isolate `rendererInterceptor` only where relevant
LukasTy Jul 4, 2023
af9f8a2
Add basic demo
LukasTy Jul 4, 2023
218070f
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Jul 5, 2023
415b974
Hack a date time range process in
LukasTy Jul 5, 2023
275adb2
Correctly propagate the `selectedView`
LukasTy Jul 10, 2023
1c697e5
Handle the view management and field section selection
LukasTy Jul 13, 2023
878ed8b
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Jul 28, 2023
4eae577
Start mobile implementation
LukasTy Jul 28, 2023
526384f
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Aug 3, 2023
a38e5b9
Fix the section class names
LukasTy Aug 3, 2023
787ed6c
Apply `className` to the section items
LukasTy Aug 3, 2023
f437df9
Adjust styles
LukasTy Aug 3, 2023
0fd69b3
Fix mobile scrolling
LukasTy Aug 3, 2023
ccdea1d
Set correct width
LukasTy Aug 3, 2023
b031442
Use tabs for time range switching
LukasTy Aug 4, 2023
77f8611
Refactor DateTimeRangePickerToolbar
LukasTy Aug 8, 2023
54b6b59
Only mark selected toolbar items for current `rangePosition`
LukasTy Aug 8, 2023
03de6b0
Fix TS issue
LukasTy Aug 8, 2023
cb1d9b9
Fix and add classes
LukasTy Aug 8, 2023
19280cb
Fix `toolbarTitle` TS issue
LukasTy Aug 8, 2023
05f401d
Use correct `onChange` handler
LukasTy Aug 10, 2023
8ca9e98
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Aug 10, 2023
3bac9f1
Refactor views management and support `sequentialViewOrder`
LukasTy Aug 11, 2023
61035b0
Add `sequentialViewOrder` prop usage demo
LukasTy Aug 11, 2023
f67c50b
Correctly apply `date-time` input width on multi input range pickers
LukasTy Aug 11, 2023
9b70aba
Make the inactive view type opaque
LukasTy Aug 11, 2023
08c41bb
Make only time part opaque
LukasTy Aug 15, 2023
528ea77
Add `DateTimeRangePickerTabs` component
LukasTy Aug 15, 2023
ea5cdd1
Remove `start` and `end` tabs
LukasTy Aug 15, 2023
da96ee6
Preserve `time` when changing the date
LukasTy Aug 15, 2023
15de593
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Aug 25, 2023
7faad42
Fix TS
LukasTy Aug 25, 2023
1100d94
Fix build
LukasTy Aug 25, 2023
8800fc7
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Aug 31, 2023
3505957
Export new pickers from top level
LukasTy Sep 1, 2023
f191ce7
Set `ampmInClock` to handle `renderTimeViewClock`
LukasTy Sep 1, 2023
bcf1d64
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Sep 15, 2023
7c4bbb9
Refactor to force `date->time->date->time` selection flow
LukasTy Sep 19, 2023
4c8ec5a
Enable overflow scrolling on mobile
LukasTy Sep 19, 2023
7e0536d
Fix max height to take the full container height
LukasTy Sep 20, 2023
8a31dd6
Fix selection flow on DateRangePicker
LukasTy Sep 20, 2023
960060e
Revert duplicate view syncing
LukasTy Sep 20, 2023
4ab4643
Extract common hook types
LukasTy Sep 21, 2023
a4e5fe4
Create separate `useDateTimeRangePicker` hook
LukasTy Sep 22, 2023
5fcb47a
Avoid moving section on initial field focus
LukasTy Sep 22, 2023
a157d09
Create a `rendererInterceptor` function to avoid too many re-renders
LukasTy Sep 22, 2023
8989f82
Add primary color and bold to highlight current toolbar section
LukasTy Oct 10, 2023
dfa2e66
Refactor tabs
LukasTy Oct 11, 2023
57f8f19
Localize tab labels
LukasTy Oct 11, 2023
d92537b
Use existing labels for icon button titles
LukasTy Oct 11, 2023
e978378
l10n
LukasTy Oct 11, 2023
8a12cec
Use same height Clock view as calendar on mobile to avoid layout shif…
LukasTy Oct 11, 2023
ed7d271
Adjust style
LukasTy Oct 11, 2023
9ba9171
Fix toolbar style overriding
LukasTy Oct 11, 2023
ac7d8e4
Remove redundant explicit `shouldForwardProp`
LukasTy Oct 11, 2023
d613d8a
Fix 1px difference
LukasTy Oct 11, 2023
1233ad6
Remove opacity and simplify rendering
LukasTy Oct 13, 2023
5b6131d
Remove "under construction"
LukasTy Oct 13, 2023
ab942e2
Update documentation
LukasTy Oct 13, 2023
09902aa
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Oct 16, 2023
8a3f0b2
Remove `StaticDateTimeRangePicker` references
LukasTy Oct 16, 2023
c170fec
Minor cleanup
LukasTy Oct 16, 2023
1ea4818
Add new toolbar props JSDoc
LukasTy Oct 16, 2023
b21a691
proptypes
LukasTy Oct 16, 2023
81e67e5
docs:api
LukasTy Oct 16, 2023
aaf4f93
Update API index
LukasTy Oct 16, 2023
1fac06b
Extract and reuse field type into `FieldType`
LukasTy Oct 17, 2023
562064a
Merge remote-tracking branch 'origin/master' into add-date-time-range…
LukasTy Oct 19, 2023
924f135
Extract and reuse `unstable` start and end field ref types
LukasTy Oct 19, 2023
9a8783d
Prepare `useDesktopRangePicker` for usage on DateTimeRange
LukasTy Oct 19, 2023
bd6c324
Move `DateTimeRange` relevant effect to enriching hook
LukasTy Oct 19, 2023
cb70b18
Remove `useDesktopDateTimeRangePicker` hook
LukasTy Oct 19, 2023
a6f273c
Fix tests
LukasTy Oct 19, 2023
a471981
Minor tweaks
LukasTy Oct 19, 2023
28b1451
Apply suggestions from code review
LukasTy Oct 20, 2023
580a91d
Code review: Flavien
LukasTy Oct 20, 2023
4ca9f9b
Refactor toolbar types to avoid `ts-ignore`
LukasTy Oct 20, 2023
28daea8
Merge remote-tracking branch 'origin/next' into add-date-time-range-p…
LukasTy Nov 7, 2023
a184dd1
Improve TS
LukasTy Nov 9, 2023
2125343
Merge branch 'next' into add-date-time-range-picker
LukasTy Nov 9, 2023
f722fef
Remove `components` & `componentsProps`
LukasTy Nov 9, 2023
2dcf027
proptypes
LukasTy Nov 9, 2023
2822084
docs:api
LukasTy Nov 9, 2023
1689b8c
Merge branch 'next' into add-date-time-range-picker
LukasTy Nov 10, 2023
d6e72b4
Fix after merge
LukasTy Nov 10, 2023
28f184d
Use correct validator
LukasTy Nov 10, 2023
088999d
Correctly forward `ref`
LukasTy Nov 10, 2023
0d06bdd
Add `rendererInterceptor` JSDoc
LukasTy Nov 10, 2023
c33357a
Improve typing on separately defined `rendererInterceptor`
LukasTy Nov 30, 2023
1bd1c2d
Merge remote-tracking branch 'origin/next' into add-date-time-range-p…
LukasTy Nov 30, 2023
e8005d0
Define mobile `rendererInterceptor` separately and fix views management
LukasTy Nov 30, 2023
79174d3
Fix proptypes
LukasTy Nov 30, 2023
277db07
Fix type
LukasTy Nov 30, 2023
41362a5
Include digital clock slots in `DTR` types
LukasTy Nov 30, 2023
561e823
Support different view renderers in typing
LukasTy Nov 30, 2023
796da62
Align the height of calendar and time containers
LukasTy Nov 30, 2023
95c320a
Refine header dimensions to be consistent between regular and range c…
LukasTy Dec 1, 2023
19b9cbd
Make the default calendar height correct
LukasTy Dec 1, 2023
52dcecc
docs:api
LukasTy Dec 1, 2023
423c2ae
Remove irrelevant `localeText` mapping
LukasTy Dec 1, 2023
37f0d1c
Refactor to use `availableRangePositions` instead of `forceFinishSele…
LukasTy Dec 1, 2023
0dda73a
docs:api
LukasTy Dec 1, 2023
a920ca7
Merge branch 'next' into add-date-time-range-picker
LukasTy Dec 6, 2023
f8edf40
Add different time view renderers demo
LukasTy Dec 6, 2023
be60895
Fix DigitalClock styling on mobile
LukasTy Dec 6, 2023
96a70a3
Fix duplicate definition after merge
LukasTy Dec 6, 2023
5f83ca3
Use `DigitalClock` when settings call for it
LukasTy Dec 6, 2023
1677edb
Show disabled minutes toolbar button with DigitalClock
LukasTy Dec 6, 2023
b7e86ca
Mark minutes button as selected with DigitalClock
LukasTy Dec 6, 2023
24a6be7
Omit `meridiem` view when `MultiSectionDigitalClock` is not used
LukasTy Dec 6, 2023
1cddda1
Fix to propagate the selected view in TimeClock
LukasTy Dec 7, 2023
26bba30
proptypes
LukasTy Dec 7, 2023
d28400d
docs:api
LukasTy Dec 7, 2023
374d08f
Adjust demo
LukasTy Dec 7, 2023
6805a81
Avoid unwanted diff
LukasTy Dec 7, 2023
bffcc81
Merge remote-tracking branch 'origin/next' into add-date-time-range-p…
LukasTy Dec 8, 2023
7f4bdd7
Merge branch 'next' into add-date-time-range-picker
LukasTy Dec 11, 2023
28b603f
Fix after merge
LukasTy Dec 11, 2023
a0e36ee
Refactor after merge
LukasTy Dec 12, 2023
4f4ee19
proptypes
LukasTy Dec 12, 2023
243b5af
docs:api
LukasTy Dec 12, 2023
6b772d9
Avoid buggy mobile multiple calendars behavior
LukasTy Dec 12, 2023
174a7a7
scripts
LukasTy Dec 12, 2023
4875a16
Clean up typing
LukasTy Dec 13, 2023
0cf36eb
scripts
LukasTy Dec 13, 2023
c41b9fd
Merge remote-tracking branch 'origin/next' into add-date-time-range-p…
LukasTy Dec 13, 2023
6525fd3
scripts
LukasTy Dec 13, 2023
f07b264
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 3, 2024
869324c
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 4, 2024
65d6313
Fix to avoid advancing time views when re-selecting day
LukasTy Jan 4, 2024
9df9d64
Avoid >2 levels deep imports
LukasTy Jan 4, 2024
3eea5b3
Remove redundant `calendars` omitting
LukasTy Jan 4, 2024
4ff5ded
Avoid imports with >2 depth
LukasTy Jan 5, 2024
0927f71
Focus the first section when swapping range position
LukasTy Jan 5, 2024
ec53dd7
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 8, 2024
8e90c34
Update `DateRange` imports in DTR code
LukasTy Jan 8, 2024
596aed4
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 17, 2024
f8b4344
Fix proptypes after merge
LukasTy Jan 17, 2024
6b93e62
Fix `docs:api` after merge
LukasTy Jan 17, 2024
62e2d29
Simplify `DateTimeRangePickerTimeWrapper`
LukasTy Jan 17, 2024
ffd0951
Fix TS error when building `docs:api`
LukasTy Jan 17, 2024
694619b
Fix api docs generation by ignoring internal component
LukasTy Jan 17, 2024
c18d3f0
prettier
LukasTy Jan 17, 2024
058072f
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 18, 2024
0076c49
Simplify `DateTimeRangePickerToolbar` behavior by avoiding the extra …
LukasTy Jan 18, 2024
aa26bf9
proptypes
LukasTy Jan 18, 2024
67c1f0a
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 18, 2024
6486fed
docs:api
LukasTy Jan 18, 2024
6007142
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 19, 2024
c4429fa
docs:api after merge
LukasTy Jan 19, 2024
c0f1d90
Resolve warning when building docs
LukasTy Jan 19, 2024
9149b94
Cleanup scripts
LukasTy Jan 19, 2024
195c6c0
prettier
LukasTy Jan 19, 2024
d5051bf
Apply `bold + primary color` toolbar styling to `DateTimePickerToolbar`
LukasTy Jan 19, 2024
077f8fa
Increase specificity
LukasTy Jan 19, 2024
93ea328
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 19, 2024
cd43afb
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 22, 2024
1439e25
just keep on swapping places...
LukasTy Jan 22, 2024
d7ce9c2
Remove redundant translation files
LukasTy Jan 22, 2024
bb7d90b
Achieve needed layout using `layout` API
LukasTy Jan 22, 2024
10d633c
proptypes
LukasTy Jan 22, 2024
b828e0a
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 22, 2024
7e1f31c
Allow overriding predefined layout `sx`
LukasTy Jan 22, 2024
b42466d
Fix `sx` spreading
LukasTy Jan 22, 2024
c0929f5
Fix types to not allow `slotProps.tabs` on `DateRangePicker`
LukasTy Jan 23, 2024
eab56e6
Revert previous change
LukasTy Jan 24, 2024
72ae3d8
Use omit to avoid exposing `slotProps.tabs` where not needed
LukasTy Jan 24, 2024
e8529dd
Correctly define `sx` as an array
LukasTy Jan 24, 2024
13c674b
Add `ok` action bar action on desktop by default
LukasTy Jan 24, 2024
9ec35a3
Merge remote-tracking branch 'upstream/next' into add-date-time-range…
LukasTy Jan 24, 2024
5c11253
docs:api
LukasTy Jan 24, 2024
2bd2bfb
prettify
LukasTy Jan 24, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ module.exports = {
'useTimePickerDefaultizedProps',
'useDateTimePickerDefaultizedProps',
'useDateRangePickerDefaultizedProps',
'useDateTimeRangePickerDefaultizedProps',
'useDateCalendarDefaultizedProps',
'useMonthCalendarDefaultizedProps',
'useYearCalendarDefaultizedProps',
Expand Down
25 changes: 25 additions & 0 deletions docs/data/date-pickers-component-api-pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,21 @@ const apiPages: MuiPage[] = [
pathname: '/x/api/date-pickers/date-time-picker-toolbar',
title: 'DateTimePickerToolbar',
},
{
pathname: '/x/api/date-pickers/date-time-range-picker',
title: 'DateTimeRangePicker',
plan: 'pro',
},
{
pathname: '/x/api/date-pickers/date-time-range-picker-tabs',
title: 'DateTimeRangePickerTabs',
plan: 'pro',
},
{
pathname: '/x/api/date-pickers/date-time-range-picker-toolbar',
title: 'DateTimeRangePickerToolbar',
plan: 'pro',
},
{
pathname: '/x/api/date-pickers/day-calendar-skeleton',
title: 'DayCalendarSkeleton',
Expand All @@ -70,6 +85,11 @@ const apiPages: MuiPage[] = [
pathname: '/x/api/date-pickers/desktop-date-time-picker',
title: 'DesktopDateTimePicker',
},
{
pathname: '/x/api/date-pickers/desktop-date-time-range-picker',
title: 'DesktopDateTimeRangePicker',
plan: 'pro',
},
{
pathname: '/x/api/date-pickers/desktop-time-picker',
title: 'DesktopTimePicker',
Expand All @@ -95,6 +115,11 @@ const apiPages: MuiPage[] = [
pathname: '/x/api/date-pickers/mobile-date-time-picker',
title: 'MobileDateTimePicker',
},
{
pathname: '/x/api/date-pickers/mobile-date-time-range-picker',
title: 'MobileDateTimeRangePicker',
plan: 'pro',
},
{
pathname: '/x/api/date-pickers/mobile-time-picker',
title: 'MobileTimePicker',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function BasicDateTimeRangePicker() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker']}>
<DateTimeRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function BasicDateTimeRangePicker() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker']}>
<DateTimeRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<DateTimeRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function DateTimeRangePickerCalendarProp() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer
components={[
'DateTimeRangePicker',
'DateTimeRangePicker',
'DateTimeRangePicker',
]}
>
<DemoItem label="1 calendar" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={3} />
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function DateTimeRangePickerCalendarProp() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer
components={[
'DateTimeRangePicker',
'DateTimeRangePicker',
'DateTimeRangePicker',
]}
>
<DemoItem label="1 calendar" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={3} />
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<DemoItem label="1 calendar" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateTimeRangePicker">
<DateTimeRangePicker calendars={3} />
</DemoItem>
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import * as React from 'react';
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function DateTimeRangePickerValue() {
const [value, setValue] = React.useState([
dayjs('2022-04-17T15:30'),
dayjs('2022-04-21T18:30'),
]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
<DemoItem label="Uncontrolled picker" component="DateTimeRangePicker">
<DateTimeRangePicker
defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
/>
</DemoItem>
<DemoItem label="Controlled picker" component="DateTimeRangePicker">
<DateTimeRangePicker
value={value}
onChange={(newValue) => setValue(newValue)}
/>
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function DateTimeRangePickerValue() {
const [value, setValue] = React.useState<DateRange<Dayjs>>([
dayjs('2022-04-17T15:30'),
dayjs('2022-04-21T18:30'),
]);

return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
<DemoItem label="Uncontrolled picker" component="DateTimeRangePicker">
<DateTimeRangePicker
defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
/>
</DemoItem>
<DemoItem label="Controlled picker" component="DateTimeRangePicker">
<DateTimeRangePicker
value={value}
onChange={(newValue) => setValue(newValue)}
/>
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<DemoItem label="Uncontrolled picker" component="DateTimeRangePicker">
<DateTimeRangePicker
defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
/>
</DemoItem>
<DemoItem label="Controlled picker" component="DateTimeRangePicker">
<DateTimeRangePicker
value={value}
onChange={(newValue) => setValue(newValue)}
/>
</DemoItem>
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
import {
renderDigitalClockTimeView,
renderTimeViewClock,
} from '@mui/x-date-pickers/timeViewRenderers';

export default function DateTimeRangePickerViewRenderer() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
<DemoItem label="With digital clock" component="DateTimeRangePicker">
<DateTimeRangePicker
views={['day', 'hours']}
timeSteps={{ minutes: 20 }}
viewRenderers={{ hours: renderDigitalClockTimeView }}
/>
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
<DateTimeRangePicker
viewRenderers={{
hours: renderTimeViewClock,
minutes: renderTimeViewClock,
seconds: renderTimeViewClock,
}}
/>
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
import {
renderDigitalClockTimeView,
renderTimeViewClock,
} from '@mui/x-date-pickers/timeViewRenderers';

export default function DateTimeRangePickerViewRenderer() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
<DemoItem label="With digital clock" component="DateTimeRangePicker">
<DateTimeRangePicker
views={['day', 'hours']}
timeSteps={{ minutes: 20 }}
viewRenderers={{ hours: renderDigitalClockTimeView }}
/>
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
<DateTimeRangePicker
viewRenderers={{
hours: renderTimeViewClock,
minutes: renderTimeViewClock,
seconds: renderTimeViewClock,
}}
/>
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<DemoItem label="With digital clock" component="DateTimeRangePicker">
<DateTimeRangePicker
views={['day', 'hours']}
timeSteps={{ minutes: 20 }}
viewRenderers={{ hours: renderDigitalClockTimeView }}
/>
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
<DateTimeRangePicker
viewRenderers={{
hours: renderTimeViewClock,
minutes: renderTimeViewClock,
seconds: renderTimeViewClock,
}}
/>
</DemoItem>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function FormPropsDateTimeRangePickers() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
<DemoItem label="disabled" component="DateTimeRangePicker">
<DateTimeRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateTimeRangePicker">
<DateTimeRangePicker readOnly />
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function FormPropsDateTimeRangePickers() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
<DemoItem label="disabled" component="DateTimeRangePicker">
<DateTimeRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateTimeRangePicker">
<DateTimeRangePicker readOnly />
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<DemoItem label="disabled" component="DateTimeRangePicker">
<DateTimeRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateTimeRangePicker">
<DateTimeRangePicker readOnly />
</DemoItem>
Loading