Support month / year only selection in datepicker

[mcailleaux]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When you configure datepicker with only month and year, the click on calendar header must switch between month and years picker

What is the current behavior?

When you configure datepicker with only month and year, the click on calendar header switch on days picker

What are the steps to reproduce?

On the showroom : https://material.angular.io/components/datepicker/overview
go to the month picker, open calendar and click on year in the header

What is the use-case or motivation for changing an existing behavior?

To have a real month picker

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6+, 7+

Is there anything else we should know?

[gopigopi096]

I have solved using directive to apply css class pointer events: none
import { Directive, HostBinding, ElementRef, HostListener, Renderer2 } from '@angular/core';
@directive({
selector: '[appDateDirective]'
})
export class DateDirective {
constructor(private elementRef: ElementRef, private renderer2: Renderer2) {
}
@HostBinding('class.mat-calendar-period-button')
get getPeriodButton() {
const node = document.querySelector('*[aria-label^="Choose date"]');
if (node) {
this.renderer2.addClass(node, 'removePeriod');
}
return true;
}
}

<mat-form-field> <input matInput [matDatepicker]="dp" placeholder="Month and year" [formControl]="date"> <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle> <mat-datepicker #dp id="datePick" startView = "multi-year" appDateDirective (yearSelected)="chosenYearHandler($event)" (monthSelected)="chosenMonthHandler($event, dp)" panelClass="example-month-picker"> </mat-datepicker> </mat-form-field>

.mat-calendar-period-button { &.removePeriod { pointer-events: none !important; } }

[gargri]

if u want only month in datepicker so in html file u have to change startView="multi-year" to startView="year"
it will work correctly

[siebmanb]

@mcailleaux is your bug the fact that after choosing a year and month we shortly see a calendar for days before it fades away?

[mcailleaux]

@siebmanb no, the bug is when you are in a month picker mode, the clic on year header switch between day picker and year picker, it is more logical to switch between month and year

I make this video to illustrate the problem
BugMonthPicker.zip

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.