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

[jinqiangg]

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 🌈

• https://material.angular.io/components/datepicker/overview#date-range-selection

Motivation 🔦

[oliviertassinari]

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

[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

[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 Is this #4995 what you are referring to?

[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

[vazkir]

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

[socramm9]

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

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

Thanks SO much for posting your solution!

[plgagnon2]

Particularly need this for analytics/statistics application...

[bruns6077]

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

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

[LukasTy]

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: #14119.

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

[gabbi-pf]

Hello, we reported #14874, sorry for the duplicate but we couldn't find this one when we searched for issues. Should this, and #14119, now be marked with plan: premium?
Also, is there an estimate on when support for year and month view will be implemented? I see this issue being opened 3 years ago, and we will need to find another solution if this functionality isn't supported in the near future. We understand you get a million requests like these and have to prioritize, but we need to evaluate other solutions if this is not implemented soon. 🫤

Duplicates #4546

You can find this issue to track our advancement on the topic, this is not yet supported but we plan to add support for it at some point

[vaneri]

@LukasTy do you think that you could help on this particular topic? / it would be great to know if there is at least a plan for it
thanks!

[flaviendelangle]

@gabbi-pf I added the requested label 👍

We don't plan to support it in the new feature because we have a very heavy roadmap for the coming months.

[DimitarKazakov]

I managed to make a workaround using DateRangeCalendar for the range selection and DateCalendar for the year and month selection. I am posting part of my code here if anyone still needs the component. Ignore the styles and the customization, the important part to look at is the monthYearView state, the dateRangeCalendarProps ref and how i am using DateCalendar and DateRangeCalendar with the custom calendarHeader. PS: i am new to posting in github discussions

Screen.Recording.2025-01-31.at.18.07.19.mov

code.txt