Make year selectable in date picker

[mschering]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

The year should be selectable from a dropdown list.

What is the current behavior?

The year can only be changed with the previous and next button.

What are the steps to reproduce?

See demo: https://material.angular.io/components/datepicker/examples

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

Entering birthdays is very cumbersome. You have to click previous a lot for old people :)

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

Material 2.0

[naveedahmed1]

I also think that there are serious usability issues with Datepicker. It works great when the user has to select date from current month or from month of the same year. I showed a form with datepicker to few people and ask them to select a date from past years for example Oct 15, 1995. I found them struggling with changing the Year. Most of them used the arrows in month view to go back which irritates user if they have to go back few years.

[julianobrasil]

It's already being tracked: #4853.

Edit: Oh, sorry, it's a different request. Material Design Specs says something nice for mobile (image bellow) but doesn't say much for desktops (but the recommendation to use segmented dropdown buttons, which matches @mschering's request).

[jonsamwell]

+1

[elmoyeldo]

+1

[naveedahmed1]

@mmalerba is there any update on this? should we expect it to be included in next release?

[mmalerba]

I'm probably not going to have time to work on this for the next month or two, I have a lot of other things currently on my plate.

[mahmood-sajjadi]

without this feature, date picker is not usable because for the birthday, if user age is 35, he/she should press prev year button 35 times 😨

[erikhaug]

+1

[wiekonek]

We really need this! Current datepicker isn't usable in most cases. Please consider this feature as important.

[agnislav]

The same concern for a birthday. Our users 18 to 60+ yrs old.

[BenRacicot]

Hey @agnislav I have the same issue and until we get the year select implemented I at least was able to work with the min/max dates to minimize the year clicking based on if:

1. 18 years ago from today is the youngest a user can be
2. user must be under 100 years old

startAt: Date;
minDate = new Date(Date.now());
maxDate = new Date(Date.now());
startDate: Date;
datepickerDisabled: boolean;
date: Date;


ngOnInit() {
 // setting the min date and thus the max birth date allowing < 100 year old choosable birthdate
 this.minDate.setDate( this.minDate.getDate() );
 this.minDate.setFullYear( this.minDate.getFullYear() - 100 );
 
 // setting the calendar's start date and youngest birth dates for > 18 years old
 this.maxDate.setDate( this.maxDate.getDate() );
 this.maxDate.setFullYear( this.maxDate.getFullYear() - 18 );
 this.startDate = this.maxDate;
}

<md-input-container>
 <input mdInput [mdDatepicker]="birthDatePicker" formControlName="birthDate" placeholder="birthdate" [min]="minDate" [max]="maxDate">
 <md-datepicker-toggle mdSuffix [for]="birthDatePicker"></md-datepicker-toggle>
 <md-datepicker #birthDatePicker startView="year" [startAt]="startDate"></md-datepicker>
 <md-error *ngIf="form.controls['birthDate'].hasError('mdDatepickerMin') && form.controls['birthDate'].touched">You can't be over 100 years old</md-error> 
 <md-error *ngIf="form.controls['birthDate'].hasError('mdDatepickerMax') && form.controls['birthDate'].touched">Users must be at least 18 years old</md-error> 
</md-input-container>

Maybe someone can help optimize this? And at least the user will begin at the 18th year and cannot click back to a date that would make them over 100 years old.

[vaibhavrtk]

+1 for this feature
Almost unusable for Date of births