search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.05k stars 1.25k forks source link

[DateRangePicker] Support month and year edition on the range pickers #4546

Open jinqiangg opened 2 years ago

jinqiangg commented 2 years ago

Correct me if I miss out anything. While using DateRangePicker on v5, I am unable to do a quick selection to change year / month. Have to manually click on the < or > button. Understand that the range design with the intend of selecting recent dates but I do have use case that requires users to select date from years ago.

Summary 💡

Allow selection of year or month upon clicking the month / year.

Examples 🌈

Motivation 🔦

mnajdova commented 2 years ago

@jinqiangg if the select is from years ago, isn't it better to use two DatePicker components?

mnajdova commented 2 years ago

Do you have maybe examples of how it is implemented in other date range picker components?

oliviertassinari commented 2 years ago

Same pain point as in https://github.com/mui-org/material-ui-pickers/issues/1769. I don't what what we should do, let's leave it to X.

socramm9 commented 2 years ago

It would be maybe also nice to have a MonthRangePicker and YearRangePicker for the time being I will use tow DatePickers with month/year views

oliviertassinari commented 2 years ago

It would be maybe also nice to have a MonthRangePicker and YearRangePicker for the time being I will use tow DatePickers with month/year views

@socramm9 Is this #4995 what you are referring to?

socramm9 commented 2 years ago

@socramm9 Is this #4995 what you are referring to?

Yes I build something similar myself now. It is not perfect and has some other issues but here some Images for Inspiration

Bildschirmfoto 2022-05-29 um 21 54 11 Bildschirmfoto 2022-05-29 um 21 54 02 Bildschirmfoto 2022-05-29 um 21 53 42
vazkir commented 2 years ago

@socramm9 Is this #4995 what you are referring to?

Yes I build something similar myself now. It is not perfect and has some other issues but here some Images for Inspiration Bildschirmfoto 2022-05-29 um 21 54 11 Bildschirmfoto 2022-05-29 um 21 54 02 Bildschirmfoto 2022-05-29 um 21 53 42

Do you by any chance have any example on how you achieved this?

socramm9 commented 2 years ago

@vazkir Yes it not up to MUI standards but its usable. Fell free to modify it however you want

https://codesandbox.io/s/busy-babycat-96jksl

cube-dan commented 1 year ago

@vazkir, You're my hero ... pulled it down, turned it into a component, can’t stop smiling.

Thanks SO much for posting your solution!

Whoops. Wrong attribution, original code by socramm9... sorry bout that @socramm9

plgagnon2 commented 1 year ago

Particularly need this for analytics/statistics application...

bruns6077 commented 6 months ago

https://material.angular.io/components/datepicker/overview

does handle this also pretty well, might be something for inspiration

LukasTy commented 1 month ago

We agreed to first add support for changing year and month views in a similar way to how Angular Material does it.

With a limitation of only supporting it when calendars={1}. If the calendars prop is not overridden by the user, we would default it to 1 if views has year or month entries. Here is the issue for enhancing the behavior to add the missing behavior: https://github.com/mui/mui-x/issues/14119.

This does not impact anything related to picking the month and year ranges.