bug(mat-datepicker): Restrict MatCalendarView

[angelaki]

Feature Description

I'd like to be able to disable some MatCalendarView options.

Use Case

I'm using the picker as a month picker. When changing the view the user get irritated by being able to select a day since the picker usualy closes on month selection (via (monthSelected)).

[zarend]

Hello @angelaki , I think we have instructions for what you are trying to accomplish in Datepicker emulating a Year and month picker
.

Could you please take a look at the above documentation and let us know if the datepicker meets your needs?

Thanks,
Zach

[angelaki]

Hey @zarend in this example you can still toggle to month view, what is a bit irritating:

[zarend]

Interesting, I'm not able to toggle to month view in the Datepicker emulating a Year and month picker example...

How are you able to do that? What steps did you take?

Environment

• Chrome Version 102.0.5005.61 (Official Build) (x86_64)
• macOS 12.4 (21F79)

[angelaki]

Actually quite easy, just click the years:

Next you are able to select a day in the month.

[zarend]

Thanks for reporting; I can reproduce. This looks to me like an issue with the example, rather than the date-picker itself. I should be able to look into fixing the example later.

[angelaki]

Actually I don't know what should keep the picker from allowing it. It has an initial view and catches the month selected event. I guess that use-case just isn't supported (yet)?

[angelaki]

Just saw you also responded to my issue #24914. Guess it's pretty related.

[zarend]

Well, clicking on the period button is supposed to change the view present, but not select anything. The calendar doesn't know that it's not supposed to show the month view in this case. I don't see any quick fix to fix this example.

A work-around for this is to use a custom calendar header. I will follow up with this, but it seems like the built-in header is not designed for being used as a month-year picker, or a year picker.

For now, a work-around is customizing the calendar header. That would be creating a header that handles switching between year and multi-year view, but doesn't switch to month view.

@crisbeto and @mmalerba, do you have context on the intended direction for the month-year picker example? This seems to be more of a limitation of specifically the header to me.

[zarend]

Hello, so I'm triaging this as a bug.

The fix here is to provide a custom header. The header would need

• appropriate navigation for next/previous on the year and multi-year views.
• appropriate navigation for switch between year and multi-year view.
• communicating the current year when in year view and the range of years when in multi-year view

A good place to start is looking at the customizing the calendar header example.

We welcome contributions if you are interested :).

[angelaki]

I'd give it a try. Where to start running the components locally? Forked / cloned https://github.com/angular/components, what's next?

[mmalerba]

You should be able to run our dev app with yarn dev-app and then navigate to http://localhost:4200/examples to see a list of all examples. The code for our datepicker examples lives under src/components-examples/material/datepicker