feat(Datepicker): Datepicker yearsPerPage value

[nerd-cs]

Is your feature request related to a problem? Please describe.

Angular Material Datepicker Multi-year view has 24 years in the table.

Hopefully want to set the yearsPerPage dynamically as well.
<mat-datepicker #picker [yearsPerPage]="N">

Describe the solution you'd like

Can we set this value via API?
<mat-datepicker #picker [yearsPerPage]="N">

Describe alternatives you've considered

We can set date range dynamically using MAT_DATE_RANGE_SELECTION_STRATEGY

/** Injection token used to customize the date range selection behavior. */
export const MAT_DATE_RANGE_SELECTION_STRATEGY =
new InjectionToken('MAT_DATE_RANGE_SELECTION_STRATEGY');

Additional context

angular/components#22253

[matheo]

@jfan0888 the Datepicker popup has a min-height that can affect this view like this:

I've reduced it for the Month Picker like this:

If you want to have a height: auto popup, it will glitch when you change from the year view, to the month-calendar
your use case aims to pick a complete date? or just the year? or what do we do with the spacing? hehe

[nerd-cs]

@matheo
But we have date year range 2016-2039 in the mat date picker header

[nerd-cs]

[matheo]

ah yeah, don't mind my HTML hacking
my point is what to do with the free-space?
you don't have a problem with it? :)

[nerd-cs]

export const yearsPerPage = 24;
Angular team defines yearsPerPage value as CONST.

[matheo]

this looks good right?

[matheo]

or also with these inputs [yearsPerPage]="12" [yearsPerRow]="2":

[matheo]

@matheo/datepicker@11.2.8 is now released with this feature ;)

[nerd-cs]

@matheo
Perfect!