[pickers] Allow to pick a range of Months with Date Range picker

[joserodolfofreitas]

Summary 💡

Sometimes the specific date of the month is not important to the user. In these cases, it'd be interesting to be able to provide a better experience by allowing users to select just the months on the range, like we have with the month view in DatePicker.

This issue was originally requested/suggested on a zendesk ticket: https://mui.zendesk.com/agent/tickets/2854

Examples 🌈

Basic behavior implementation using the date picker: https://codesandbox.io/s/datepicker-views-year-month-l1wyyv?file=/demo.js

Picture of requested solution:

• Google Ads https://ads.google.com/aw/keywordplanner/plan/keywords/historical?ocid=362594563&planId=971392186&euid=360694736&__u=4756310864&uscid=362594563&__c=1590498987&authuser=0&subid=fr-fr-awhp-g-aw-c-home-signin%21o2-adshp-hv-q4-22

https://github.com/mui/mui-x/assets/3165635/4b347131-1115-47ff-8bcc-5bf5dfa6ea64

[TheRealCuran]

In case it helps with prioritising this issue: my Order ID :credit_card: is: 47016

[spiftire]

I would like to upwote this issue. my Order ID 💳️ is: 45069

[destegabry]

Me too! My order ID 💳 is: 44740

[razlani]

Obligatory thumbs up and #metoo please and thank you!

[istisiki]

:shipit: please! 🎉

[razlani]

:shipit: please! 🎉

I ended up just building from scratch for month/year range selectors - easier than you think assuming you don't need to leverage some of the fab features of this lib

[istisiki]

I ended up just building from scratch for month/year range selectors - easier than you think assuming you don't need to leverage some of the fab features of this lib

Indeed, we ended up building our own! Would still love it if it was built-in. :)

[spiftire]

If you have implemented a solution maybe you wouldn't mind sharing? @razlani @istisiki

[goldnite]

I upvote this issue. This feature is necessary.

[TheRealCuran]

@oliviertassinari / @joserodolfofreitas this ticket is still marked as „waiting for :+1:“ while having almost a 150 :+1: and several „votes with wallet“ already. Is this an oversight or are actually more votes needed?

[joserodolfofreitas]

@TheRealCuran, No more votes are needed. We've planned to work on it just after the date time range components.

[razlani]

If you have implemented a solution maybe you wouldn't mind sharing? @razlani @istisiki

Would that I could, but for the wrath of my employer.

-Private companies amirite?

[kinoli]

Would love to see this implemented.

[oliviertassinari]

I have added an example of what it looks like on Google Ads in the issue description.

[Akbar1909]

👍

[mansurmabo]

Please do it finally my order id 78881. Needs Month, Quarter, Years.

[bdhcode]

Upvoted

[michaelfr]

upvoted !

[shipsaw]

Upvoted as well

[LevapVeeskela]

Hello, I have DateRangePicker from @mui/x-date-pickers-pro and I resolved custom calendarHeader with two selects for years and months, but when I click on its, then emit event onClose and modal will close... I resolved that problem with onOpen, open props and useState, but this is a crutch, and I need use mouseout event for modal as temp a resolve. Can you add support native events mouseout and etc for container modal/content/paper?

[LukasTy]

@LevapVeeskela Have you tried using slotProps.popper to bind your events? 🤔

[matheus1519]

two years later and we don't have a React Month Range Picker from MUI

[david-ic3]

Looking for this feature, it's a pain when end users have to go 10 years in the past.

@LukasTy , it is more motivating being focused on new features. But please consolidate what you have. Should we be looking for alternative libraries as we certainly do not want to develop this on our own.

Order ID: #19458

[LukasTy]

@david-ic3 I appreciate you voicing your interest and concern! 🙏 Could you clarify your request? This issue is about month range picker, but from your comment it seems that the pain point is the lack of year navigation within the Date Range Picker, am I correct? 🤔

[david-ic3]

©LukasTy thanks for the quick turnaround. You can check the post of @LevapVeeskela

When using the date range picker , try selecting a date that is 30 years in the past from the one selected without using the keyboard :-)