[pickers] Add `TimeRangePicker` component by flaviendelangle · Pull Request #9431 · mui/mui-x

flaviendelangle · 2023-06-23T07:19:43Z

Doc preview
Closes #4460

Follow ups:

Make the triggerRef dynamic when used with MultiInputTimeRangeField [TimeRangePicker] Shift popper between start and end input on multi input field #16920
Mark/Underline the active range section in the field [pickers] Mark active range position field section with underline #16938
Add TimeRangePicker option in various docs related places (i.e. validation, component exploration) [docs] Add TimeRangePicker to relevant validation demos #16919

mui-bot · 2023-06-23T07:24:54Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running pnpm l10n
Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-9431--material-ui-x.netlify.app/

Updated pages:

docs/data/date-pickers/time-range-picker/time-range-picker.md

Generated by 🚫 dangerJS against 59bbc64

LukasTy

Leaving some minor observations here. 🙈

LukasTy · 2023-09-14T10:57:36Z

+
+  const props = {
+    ...defaultizedProps,
+    // TODO: Do we want the toolbar to support AM/PM switch on mobile?


Probably no, unless we go with the AnalogClock on Mobile. 🤔

So the plan is to have the digital clock on mobile for range pickers and the analog clock on mobile for TimePicker / DateTimePicker ?

If we'd go with the proposed designs - it would seem so, but that is still up for debate. 🙈

Is the component ready for mobile?

I'm 100% in favor of doing it. But if we do it, for me it means that in the future we will use the digital clock on the MobileTimePicker.

Is the component ready for mobile?

It had some issues, which I tried addressing in the DateTimeRangePicker PR.

I'm 100% in favor of doing it. But if we do it, for me it means that in the future we will use the digital clock on the MobileTimePicker.

That part we still need to align on the Design and Product side. I'm also for consistency, but we currently do not seem to have a singular position that everyone agrees on. 🙈

I think we can focus our next Monday meeting on this topic 👌

Concerning the rendererInterceptor, it's not easy to understand what is the goal but I'll wait to have the JSDoc to have a 2nd look 👍

I think we can focus our next Monday meeting on this topic 👌

Oh yes, that's one of the last pressing design matters for the range pickers.

Concerning the rendererInterceptor, it's not easy to understand what is the goal but I'll wait to have the JSDoc to have a 2nd look 👍

Don't pay too much attention to it. That was my alpha implementation for configurable view renderer support and handling view combination (DateRangeCalendar on the left and MultiSectionDigitalClock or any other timeViewRenderer on the right).

github-actions · 2023-09-16T17:57:04Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-03-07T09:27:12Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-03-10T10:03:56Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

noraleonte · 2025-03-10T13:08:42Z

Great effort! 🚀 💙 Nice to see this component shaping up 💪
I didn't dive deep into the code, but I'm leaving a few comments for the design/behavior:

It's a bit hard to tell the difference between the start time picker and the end time picker. I'm can't remember exactly if we said we would implement the highlighting in a follow-up 🤔 I think we should consider implementing the highlighting design at least partially to make the switch between start and end pickers more visible.
https://github.com/user-attachments/assets/cc6970bf-131f-449c-b767-cc031baa1d00

The picker that opens depends on the value you filled out last. i.e. You fill out start time, fill out end time but don't click 'ok' or select the meridiem, the next time you open the picker, it opens on the end time and you can't select the start value unless you interact with the end value again. It can become a bit confusing for the user. This is sort of related to my comment from above: if there is a clear visual distinction the opening behavior might not be such a problem. I propose we standardize the opening behavior though... WDYT about this: clicking the open picker button always opens the start time? 🤔 Still not perfect, but maybe less confusing?
https://github.com/user-attachments/assets/18c6ca43-860b-4310-ac84-ba74ee60d2c4

There's a bit of a layout shift between the start and end time pickers due to the difference of width. Would making the start and end pickers width equal be a big hassle? 🤔
https://github.com/user-attachments/assets/82a53770-b5e2-4ac0-b7be-33ca619c274d

Would it be possible to position the picker under its input when using multi input fields?

LukasTy · 2025-03-10T14:41:20Z

Great effort! 🚀 💙 Nice to see this component shaping up 💪

Thank you for the feedback @noraleonte. 🙏

I think we should consider implementing the highlighting design at least partially to make the switch between start and end pickers more visible.

I completely agree that the current process is not great.
Your mentioned solution is planned for a follow-up, as mentioned in the description. 😉
I did not want to bloat the PR further with any TRP specific implementation.

WDYT about this: clicking the open picker button always opens the start time? 🤔 Still not perfect, but maybe less confusing?

The views or range position management has not been altered in the PR.
The process/situation is the same as for Date Range Picker.
Technically, it's also unclear what you are currently selecting on that component. 🙈
I think the highlighting should improve clarity in this regard. 😉

Would it be possible to position the picker under its input when using multi input fields?

Yes, it will be done. It's also planned for a follow-up. 😉

There's a bit of a layout shift between the start and end time pickers due to the difference of width. Would making the start and end pickers width equal be a big hassle? 🤔

Are you suggesting adding a minWidth on that demo? 🤔
EDIT: I added (fc8e76a) a minimum width to avoid the mentioned layout shift. 😉

noraleonte · 2025-03-10T15:14:48Z

Your mentioned solution is planned for a follow-up, as mentioned in the description.

Ooh, I completely missed that, sorry 🙈

The views or range position management has not been altered in the PR.
The process/situation is the same as for Date Range Picker.
Technically, it's also unclear what you are currently selecting on that component.

True, 100% agree 🤔 Highlighting will certainly help. We can treat this as a separate UX issue since it also impacts the other pickers. TRP might be in a bit of a special situation because you don't have a visual indicator of the range inside the view. For the date range you have the range highlighting so it's less confusing.

Yes, it will be done. It's also planned for a follow-up.

Nice, thanks 😄

EDIT: I added (fc8e76a) a minimum width to avoid the mentioned layout shift.

Awesome 🎉

flaviendelangle · 2025-03-11T13:01:30Z

I cannot approve 😢
@LukasTy feel free to approve and merge whenever you want.

noraleonte

Thanks for pushing this forward 🚀 great work 💙

github-actions · 2025-03-11T13:42:35Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[pickers] New component: TimeRangePicker

4f815d9

flaviendelangle added the scope: pickers Changes related to the date/time pickers. label Jun 23, 2023

flaviendelangle self-assigned this Jun 23, 2023

flaviendelangle added 14 commits September 12, 2023 07:47

Merge branch 'master' into time-range-picker

c0df14f

Work

e6be689

Work

5f4d574

Work

29a57ce

Work

8cb6519

Create very basic doc

d3336ae

Fix

3d2aa2c

Add mobile time range picker

00e0149

Work

5a1ed1a

Work

fc45f35

Fix

3496cdc

Fix

080de37

Work

0dd8572

Work

09b31e1

LukasTy reviewed Sep 14, 2023

View reviewed changes

flaviendelangle added 3 commits September 14, 2023 15:10

Merge branch 'master' into time-range-picker

42d8525

Code review: Lukas

6a80d6d

Fix

f0566ab

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 16, 2023

Merge

6c02cbc

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 26, 2023

flaviendelangle added 4 commits September 26, 2023 15:30

Merge branch 'master' into time-range-picker

7310894

Fix

0b8d736

Merge branch 'master' into time-range-picker

f6d2813

Work

0fdf3f0

LukasTy added 4 commits March 7, 2025 17:43

Merge branch 'master' into time-range-picker

e8cf797

Fix types after merge

0caa422

Add mobile tests

197759d

Add desktop tests

60491d0

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 7, 2025

LukasTy added 3 commits March 10, 2025 10:01

Add responsive component conformance test

56cfa6b

docs:api

839c501

Merge branch 'master' into time-range-picker

69041fc

LukasTy added the component: TimeRangePicker label Mar 10, 2025

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 10, 2025

Merge branch 'master' into time-range-picker

af65bf1

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 10, 2025

Add min width to duration demo clock item

fc8e76a

noraleonte approved these changes Mar 11, 2025

View reviewed changes

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 11, 2025

Merge branch 'master' into time-range-picker

5df7149

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 11, 2025

l10n

59bbc64

LukasTy merged commit 8d75836 into mui:master Mar 11, 2025

This was referenced Mar 11, 2025

[docs] Add TimeRangePicker to relevant validation demos #16919

Merged

[TimeRangePicker] Shift popper between start and end input on multi input field #16920

Merged

flaviendelangle deleted the time-range-picker branch March 12, 2025 07:15

LukasTy mentioned this pull request Mar 12, 2025

[pickers] Mark active range position field section with underline #16938

Merged

Uh oh!

Uh oh!

Conversation

flaviendelangle commented Jun 23, 2023 • edited by LukasTy Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Follow ups:

Uh oh!

mui-bot commented Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Localization writing tips ✍️

Uh oh!

LukasTy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LukasTy Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

LukasTy Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

LukasTy Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

flaviendelangle Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

LukasTy Sep 14, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Sep 16, 2023

Uh oh!

github-actions Bot commented Mar 7, 2025

Uh oh!

github-actions Bot commented Mar 10, 2025

Uh oh!

noraleonte commented Mar 10, 2025

Uh oh!

LukasTy commented Mar 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noraleonte commented Mar 10, 2025

Uh oh!

flaviendelangle commented Mar 11, 2025

Uh oh!

noraleonte left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

flaviendelangle commented Jun 23, 2023 •

edited by LukasTy

Loading

mui-bot commented Jun 23, 2023 •

edited

Loading

LukasTy commented Mar 10, 2025 •

edited

Loading