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

[robert-skinner]

It's a shame, I like it but I won't be using it until this gets implemented!

[ghost]

+1 for this
Same issue with date of births

[padilla-jm]

+1
same issue for date of birth, have to use something else

[drait]

+1
Same issue for that date of birth!.any update from angular team?!

[ankitraonka]

This is one of the most common issue. Is there any date to fix this?

[Lakston]

Came into this problem today too to implement a birth date picker. I'll give it a look but it will probably be way over my skill level to implement it :)

[ankitraonka]

@mmalerba any updates?

[mmalerba]

up-ing the priority, I know it's painful without this, I'll try to work on it as soon as I have the time

[naveedahmed1]

Awesome! It would be great to have time picker as well.

[RichardBoyder]

mmalerba , Any news for us yet with regards to this?

[Lakston]

They just released v5.0.0 RC and there was no mention of this in it. I removed the picker from my app personally and use something else as it was not usable in the current state.

I understand that there is a lot to do though so thanks for taking care of this none the less :)

[RichardBoyder]

agreed. The work these guys have done is awesome. We will be patient then.

[ankitraonka]

@mschering how are you using datepicker for birthdate? the ouput is in utc so the date will differ based on your server location.

[vividpixel]

+1

[harudragneel]

+1

[gogakoreli]

+1

[vitaly-t]

This is by far the longest-living and the most ignored P1 bug. How did Material even get released without this fixed...? And now it just seems abandoned. What's going on, guys?

[julianobrasil]

@vitaly-t, it's not abandoned. This feature has already been implemented and will probably be available in the next minor release: #8565

[ahmadsolehin]

how to solve this issue?

[julianobrasil]

Upgrade material to the latest version.

[Benno007]

Is it possible to go from e.g. month mode, and the period saying 'May 2018' to 'year mode' and the period saying '2018', then clicking '2018' takes you to multi year mode?

[julianobrasil]

@Benno007, I'm afraid there isn't such feature. Maybe an @Output() that emits when the user clicks on the period button is enough (as you can just close and reopen the calendar in the desired mode). You can open a new issue requesting for this feature.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}