[pickers] New component: DateTimeRangePicker

[rodrigofariow]

Summary 💡

Not sure how this should be implemented according to the material design specs exactly but I assume you guys have a better and more conceivable idea than me. 😁

Motivation 🔦

My company has recently bought the MUI X PRO license and despite it's clear benefit (specially DataGridPro) we were expecting a more complete DateRangePicker. Note that we are aware that it's still in the lab but I think there is a real need to have the option to select the time along with dates to formulate a date range.

A common use case is to define a period of time where some type of user events have occured. Be it activity reports from a user, be it the amount of money the user has spend during that exact period. There are endless possibilities.

Is this something that is on your roadmap? I haven't found any info regarding this question.

Thank you! :)

Benchmark

• Ant Design, for instance, has support for this ->
• More: https://mui-org.notion.site/Date-Time-Range-Picker-component-7a7cc24a3ba34ad0a04ebf6458eb5c44 (public) / https://www.notion.site/mui-org/Date-Time-Range-Picker-component-7a7cc24a3ba34ad0a04ebf6458eb5c44 (private)

Other requests

• https://www.notion.so/mui-org/Sharechat-Prateek-Amar-2aee32660fb044df8bf0337f4f357feb#e09c842ed3da47409bfe7257e5b7dac5
• https://mui.zendesk.com/agent/tickets/7124

[TiagoPortfolio]

I was looking for something like this in the docs and I couldn't find it as well.

[Republiek]

I agree. Would be great to have that functionality

[flaviendelangle]

Thank you for your feedback. I am going to start a rework of the Date Picker soon and move it to https://github.com/mui-org/material-ui-x.

[haoyinag]

I have the same question :)

[fdcolongonzalez]

Is there an ETA for this new feature?

[hoa00]

upvote for this feature 👍

[lawcia]

👍 would also like this

[ltphuoc]

👍 upvote

[trunglvse151138]

would like too see this soon 🔥🔥

[CMeyer19]

Would love to have this feature

[adarsh-drishya]

please have this feature

[purefun]

👍 would also like this

[kingkong0828]

would like too see this soon

[Jfish-mastt]

👍 We would like this also

[piyushroongta]

would like have this

[kroyallb]

👍 upvote

[WinmezzZ]

+1

[desisiv]

👍 upvote

[filipstojakovic]

👍 upvote

[lindapr]

👍

[AbrarChowdhury]

need this!

[iragreenstein]

yes, please

[bannarisoftwares]

Need this........ Please merge this feature....

[wasikarn]

Would like to have this

[hubert77500]

please, this is very needed!

[bryanltobing]

would be nice if we have this for free :).

[jjmorse]

This would be great to have 👍

[naveenchittiphp]

Please make it fast lot of projects are waiting for it 👍.

[alvamanu]

How about the ability to add predefined ranges? "Last week", "Last month" etc. Also, typed in time inputs would be great.

[flaviendelangle]

How about the ability to add predefined ranges? "Last week", "Last month" etc.

You can have a look at https://github.com/mui/mui-x/issues/4563

[heshamnaim]

Upvote!!!

[robinjhuang]

Upvote!!

[geraldchen890806]

Upvote!!

[dipali-oc]

Upvote

[zakka258]

upvote

[mlshvdv]

Upvote

[ghost]

Upvote !!!

[josempineiro]

Upvote!!

[afilp]

Upvote

[pablo-johnson]

Upvote!

[LuisGVV]

Definitely need this! Upvote!

[ten-skp]

Upvote

[flaviendelangle]

Small update here. We know that a lot of people are waiting for this feature and it remains one of our top priority.

The team is currently rebuilding the input part of the pickers from scratch to provide a better experience. We should be able to soon release a first documented (but still unstable) version of those components soon. You can find a basic internal documentation of those components here if you are curious.

The plan is then to create new keyboard-only components from time range and date time range in the coming weeks. And then to build new pickers around them, just like we plan to migrate the already existing pickers to those new components.

In summary the DateTimeRangePicker will come in two steps:

1. It's keyboard-only component (probably by the end of October with an Unstable_ prefix)
2. It's full picker with the calendar views (probably at the beginning of 2023, maybe before with an Unstable_ prefix)

[stephen-lu-scovano]

Upvote. Beside basic date time range selector, it will better to have some quick range options, like Today (00:00:00 to now), this week, last 15 mins, last 30 mins, last hour, last 24 hours, last 7 days, last 30 days and so on.

[flaviendelangle]

Beside basic date time range selector, it will better to have some quick range options, like Today (00:00:00 to now), this week, last 15 mins, last 30 mins, last hour, last 24 hours, last 7 days, last 30 days and so on.

This topic is covered in #4563 are @alexfauquette is currently working on it. @alexfauquette we must make sure that the approach we take works with the future TimeRangePicker and DateTimeRangePicker even if I don't see a reason for it not to be.

[bvivek20]

Upvote

[Takueg]

Upvote

[santoshD93]

upvote👍

[rsmml]

upvote 👍 🚀

[Aphanite]

Upvote