Make year selectable in date picker

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

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.

@mschering

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).

+1

@mmalerba

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

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.

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 😨

+1

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

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

@agnislav

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:

18 years ago from today is the youngest a user can be
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.

+1 for this feature
Almost unusable for Date of births

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

+1

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?

@vitaly-t

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

how to solve this issue?

Upgrade material to the latest version.

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?

@Benno007

@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.

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.}

Navigation Menu

Repository navigation

Make year selectable in date picker #5845

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

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

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Make year selectable in date picker #5845

Description

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

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

Activity

naveedahmed1 commented on Jul 18, 2017

julianobrasil commented on Jul 18, 2017

jonsamwell commented on Aug 8, 2017

elmoyeldo commented on Aug 10, 2017

naveedahmed1 commented on Aug 10, 2017

mmalerba commented on Aug 10, 2017

mahmood-sajjadi commented on Aug 13, 2017

erikhaug commented on Sep 1, 2017

wiekonek commented on Sep 6, 2017

agnislav commented on Sep 12, 2017

BenRacicot commented on Sep 12, 2017

vaibhavrtk commented on Sep 13, 2017

robert-skinner commented on Sep 25, 2017

13 remaining items

vividpixel commented on Dec 7, 2017

harudragneel commented on Dec 21, 2017

gogakoreli commented on Dec 21, 2017

vitaly-t commented on Dec 23, 2017

julianobrasil commented on Dec 23, 2017

ahmadsolehin commented on Feb 6, 2018

julianobrasil commented on Feb 6, 2018

Benno007 commented on May 17, 2018

julianobrasil commented on May 17, 2018

angular-automatic-lock-bot commented on Sep 10, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions