[pickers] Allow controlling the current calendar month

[andymanitara]

The problem in depth 🔍

We're using the Date Range Calendar component, and we'd like to have a "Today" button, where when clicked we scroll the user back to todays date but don't select todays date, or deselect any range they currently have selected.

Is this currently possible, or would this have to be an added feature to be able to scroll to a specific date without changing the value?

Your environment 🌎

`npx @mui/envinfo`

   System:
    OS: macOS 14.0
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 118.0.5993.117
    Edge: 118.0.2088.76
    Safari: 17.0
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/icons-material: ^5.14.11 => 5.14.11 
    @mui/lab: 5.0.0-alpha.150 => 5.0.0-alpha.150 
    @mui/material: ^5.14.11 => 5.14.11 
    @mui/types:  7.2.7 
    @mui/x-data-grid-premium: ^6.16.1 => 6.16.1 
    @mui/x-date-pickers: ^6.14.0 => 6.14.0 
    @mui/x-date-pickers-pro: ^6.14.0 => 6.14.0 
    @types/react: ^18.0.33 => 18.0.33 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.3 => 5.0.3 

Search keywords: date range calendar
Order ID: 75677

[LukasTy]

Thank you for creating this issue! 🙏
There does not seem to be an option to achieve your desired behavior given the existing API.

I'm moving this issue to our grooming board to discuss the best solution we can take here.

Could you please expand on what kind of implementation you are looking into for this button?

• Would you like to place your button in the action bar (i.e. change the existing Today button behavior or add a new one)?
• Would you like to put a button anywhere in the rendered layout or maybe even somewhere outside of the rendered picker?

[andymanitara]

Hey, sure no problem.

I think the best implementation would be more just being able to scroll to a particular date without affecting the value/ selection the user has made. In our case, the Today button we use should scroll the user back to todays date without changing the value they may have already selected. But maybe it's more useful to allow people to be able to scroll to a specific date without affecting the selection regardless?

In our case inside the action bar works fine though if we wanted the today button there

[LukasTy]

Thank you for your feedback. 🙏
Naturally, this feature would allow controlling only the month, without affecting the date. There is already a today action button that does that. 🙈

[andymanitara]

Can you show me an example of this? Because whenever we use the Today button it sets the value, we want to be able to select today and for it to navigate/scroll us back to the current month/date but not select todays date and keep the users current selection

EDIT: Oh sorry misread, I get what you mean we already have a today button that does the selection haha - yea I think it should be a function we can call to just navigate/scroll to a selected date without affecting the value

[andymanitara]

Is this a function you guys can add @LukasTy ?

[LukasTy]

Is this a function you guys can add?

Sure, anything can be done. 👍
I've moved the issue to the "needs grooming" state so that the team can discuss the best solution.

My idea was to make the currentMonth a controllable prop, just like the value or selectedSections.
Then it would be up to the user to decide, when the month has to update, based on the data received in the onCurrentMonthChange callback.
But maybe there is a better way that I didn't think of. 🤔

[LukasTy]

We discussed that the plan is to support this only on the new upcoming DX, which will make the implementation easier.