mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

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

Open jinqiangg opened this issue 3 years ago • 11 comments

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.

  • [X] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

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

Examples 🌈

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

Motivation 🔦

jinqiangg avatar Nov 03 '21 07:11 jinqiangg

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

mnajdova avatar Nov 03 '21 09:11 mnajdova

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

mnajdova avatar Nov 03 '21 09:11 mnajdova

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.

oliviertassinari avatar Nov 29 '21 16:11 oliviertassinari

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 avatar Mar 08 '22 21:03 socramm9

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?

oliviertassinari avatar May 24 '22 21:05 oliviertassinari

@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

socramm9 avatar May 29 '22 19:05 socramm9

@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?

vazkir avatar Jul 15 '22 10:07 vazkir

@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

socramm9 avatar Jul 20 '22 08:07 socramm9

@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

cube-dan avatar Apr 18 '23 01:04 cube-dan

Particularly need this for analytics/statistics application...

plgagnon2 avatar Jul 26 '23 13:07 plgagnon2

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

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

bruns6077 avatar Feb 16 '24 15:02 bruns6077