[pickers] Allow specifying the current year in <MonthCalendar />

[githorse]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Is there some way to change the year on the MonthCalendar? Without it the component is pretty unusable without extra effort to build a year picker around it. Or maybe I'm unclear on how the component is intended to be used -- could someone provide an example?

Examples 🌈

No response

Motivation 🔦

I'm attempting to build a custom modal date range picker around MUI components, but I can't use the MonthPicker without a way to adjust the year on it.

Order ID 💳 (optional)

46840

[alexfauquette]

This issue is similar to #8837

The MonthCalendar would need a new prop similar to currentMonth. Something like that should do the job

--- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx
@@ -77,6 +77,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate>(
   const {
     className,
     value: valueProp,
+    currentMonth,
     defaultValue,
     disabled,
     disableFuture,
@@ -108,8 +109,8 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate>(
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
 
   const selectedDateOrStartOfMonth = React.useMemo(
-    () => value ?? utils.startOfMonth(now),
-    [now, utils, value],
+    () => value ?? currentMonth ?? utils.startOfMonth(now),
+    [now, currentMonth, utils, value],
   );
 
   const selectedMonth = React.useMemo(() => {

[flaviendelangle]

currentMonth or referenceValue is we go for this comment solution: #8311 (comment)

[githorse]

If I'm understanding correctly, currentMonth obviously gets me part of the way there, but I would still have to provide my own dropdown or whatever to select a different year, yes? This seems inconsistent with DateCalendar and YearCalendar, which let the user essentially pick any value via (scrolling, < > buttons, or dropdown pickers) without having to be "refreshed" with a new range from outside.

[alexfauquette]

The <MonthCalendar /> is only here to pick a month. If you want to have the view management part you should use *

<DateCalendar views={["year", "month"]} />

https://codesandbox.io/s/wonderful-boyd-yu9qse?file=/demo.tsx

[flaviendelangle]

As @alexfauquette said:

• MonthCalendar => month
• YearCalendar => year
• DateCalendar => year + month + day (uses MonthCalendar and YearCalendar behind the scene, as well as the private DayCalendar)