Material: md-datepicker should have option to select year and month

[manishbafna]

If we have to select future of past dates, (date of birth of something), it is difficult to scroll up and down. Should have selection of year and month.

[pavankumarkatakam]

I thought month selecting is done by scrolling, but i dont know that year selecting is present.

[manishbafna]

Year and month selection will be important if we want to select past or future dates.

[kamarouski]

+1. Imagine using datepicker to select birthday date.

[raunakpsingh]

+1 Its tedious to go back a few years

[dohomi]

+1, would be great if the behaviour of the selection would come closer to the specs:
https://www.google.de/design/spec/components/pickers.html#pickers-date-pickers
There you can select fast between years and months, currently the scrolling behaviour isn't catchy and intuitive for a user.

[dsbaars]

So why is this one left open, and my issue #4216 closed @jelbourn ?

[Pelu2k12]

+1

[kpgarrod]

+1

[oswaldofreitas]

+1

[juanvillegas]

this should be priority high, its almost useless otherwise as no one is going to actually choose this as datepicker solution as most use cases involve birthdate or publication date, etc

[kpgarrod]

I agree. The current datepicker is unusable. Certainly not releasable.

On Thu, 19 Nov 2015, 19:39 Juan Villegas [email protected] wrote:

this should be priority high, its almost useless otherwise as no one is
going to actually choose this as datepicker solution as most use cases
involve birthdate or publication date, etc

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/4251#issuecomment-158150181.

[ranbuch]

+1

[marcoT89]

+1

[idostern]

+1

[leex]

+1 need to select date of birth, current datepicker unacceptable for users

[jelbourn]

Gathering feedback for our UX designers: is it not clear to users that the datepicker has a text input for quick entry of any date?

[BobDankert]

I think it's clear there is a text input, but I feel many/most users are used to using a UI component to pick a date if they are given a UI component (eg, if there is a UI component for a date field, I almost always use this since my hand is likely on the mouse already).

[oswaldofreitas]

I agree with @BobDankert, if you understand that users can type date manually, so why to build a calendar with a partial utility to select only dates near from typed date?

Why dont follow Google Material Design Datepicker specification?

[jelbourn]

Working with the Material Design team, we build the datepicker to reflect an upcoming spec that's going to be published sometime in the near future.

@mhchen is actively working on the month/year picker portion.

[BobDankert]

@jelbourn - is this still expected to be part of 1.0? It's currently showing a milestone of RC7, which was released a couple days ago.

[jelbourn]

Going to be post-1.0 now

[kpgarrod]

@jelbourn How can you call a release 1.0 if it has an important component
that is basically unusable?

On Thu, Dec 10, 2015 at 10:34 PM Jeremy Elbourn [email protected]
wrote:

Going to be post-1.0 now

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/4251#issuecomment-163755690.

[ranbuch]

I agree, When I've considered whether to go with angular-material I saw that it's on release candidate. That's the main reason I decided to use it.

Can't say that I'm sorry about my decision because this is a beautiful UI/UX but release candidate should say something that this project doesn't supplying just yet.

[berkyl]

+1

[troig]

+1

[scote]

+1

[LeoLozes]

+1

[sebastiengiroux]

+1

[lupena]

+1

It's imposible to select a birthday with the current datepicker. you have to scroll around 30 years to find your birthdate :/

[MilosStanic]

@lupena yes, and that's in case you're 30 years old. But, believe it or not, there are people as much as twice older than that using internet :)

[juanvillegas]

@lupena and consider also historical dates, etc..

[jb29]

I created an app for managing retired employees.
Somehow no one realized that they could manually type in the birthdates and they got really frustrated using the datepicker.
In the end I had to remove this feature completely.

[kdomagal]

+1

[tucq88]

+1 @jb29 . I can't believe they could release a datepicker without year select. Just imagine i'm 30, and I have to scroll up a century to get my birth's year ??? It's insane. If it's not ready, please don't release it so we could switch to other options.

[juanpujol]

+1

[mohammedpascal]

It's so sad this issue moved to Backlog :(

[jelbourn]

Moving this out of backlog as it is actually being worked on.

[vijaysutaria]

When can we expect this to be available for use?

[mohammedpascal]

Thanks @jelbourn

[cornelos]

+1

[renanpdp]

+1

[oswaldofreitas]

Lots of folks asking for this, when you guys will release this?

Why "medium" priority and not urgent when people tell you it's very important to them?

Backlog milestone? I'm waiting this feature for a long time :(

[davidtmnolan]

+1

[octaviandavid]

+1

[aminkh17]

+1

[defox12]

:+1:
Some temporary workaround reference
https://github.com/alenaksu/mdPickers

[manishbafna]

Nice workaround.
But will not work if we already have a mdDialog opened. Multiple mdDialog
cannot be opened at the same time.

On Wed, Jan 27, 2016 at 12:56 PM, defox12 [email protected] wrote:

[image: :+1:]
Some temporary workaround reference
https://github.com/alenaksu/mdPickers

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/4251#issuecomment-175462380.

[pavankumarkatakam]

Hi @defox12 , its nice to have this workaround but as mentioned @manishbafna if there is already mdDialog opened it wont work.

[davetclark]

Is there a way to disable the calendar widget of the datepicker, while still getting the keyboard-entry features of the date input field? For birthday input, I'd rather disable the calendar widget until year support is added, but it would still be nice to get the date validation, etc.

[MilosStanic]

@davetclark this is a good suggestion.

[UltimateFighter]

whats now with the year navigation.

Without that, this datepicker is unusable for the most necessities:

• First registration of cars
• birthdays
• etc.

[askanium]

+1

[stefan-leye]

+1

[AldoFerrari]

+1
selecting a birthDay is impossible.

if you want to use material angualr in a real project for clients on real application this type of field it is foundamental. and more...the offical material design guidelines specify it correctly:
https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers

[oswaldofreitas]

42 participants in this issue and counting...

[georules]

+1 I actually just posted a few questions about this on the google group, and this is very related. https://groups.google.com/forum/#!topic/ngmaterial/5L0nQQ1aR3E

[amiral84]

+1 I will join the group :). I have been also searching this feature. I know it is already implemented in Bootstrap datepicker.

[Maxsky5]

+1

[guiburi]

+1

[swazza]

+1

[estebandee]

+1

[jquinter]

+1

[tacticurv]

+1 would be great to have year selection for selecting DoB

[jpike88]

@http://logbon72.github.io/angular-material-datetimepicker/

I'm going to import and modify this date picker instead as the datepicker in angular material is pathetic. I encourage others to do the same instead of waiting forever for this

[leex]

@jpike88 That datepicker still has the date of birth selection problem. It's also difficult to understand how to change the minutes, you have to click ok first but it's unintuitive.

[jpike88]

Agreed but it's way further ahead than this one, I'm already improving it by adding a up/down year button

[leex]

Awesome, throw in a up/down 10 years while you're at it would be fantastic.

On Tue, Mar 1, 2016 at 8:42 PM, jpike88 [email protected] wrote:

Agreed but it's way further ahead than this one, I'm already improving it
by adding a up/down year button

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/4251#issuecomment-190598841.

[pavankumarkatakam]

Hi @jpike88 , This datepicker doesn't work when an already another md-dialog is open.

[muratcorlu]

+1

[jpike88]

Is there a way to modify it to present it in a special 'priority' dialog that can just present over the top regardless of whether an md-dialog is showing?, or is that going to be too much work?

[jpike88]

http://logbon72.github.io/angular-material-datetimepicker/

He has opened up issues, people are welcome to post any

[ravitejadeevi]

+1

[KelvinOm]

+1

[joaopedronardari]

+1

[ivan-zakharchuk]

• hope it will be something like jquery datepicker - which has really usable interface and with material style will look awesome

[stunaz]

Now github as the +1 functionality !

[d668]

hey so what can i use for birthday picker?

[a8775]

+1

[gigablox]

How do people feel about dropdowns for both the month and the year? Isn't this the simplest solution?

Or perhaps get a little closer to the spec outlined in:
https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers

Why the virtual scroll and not the arrows? Seems like a bunch of extra work with little added value.

[bondz]

This was implemented nicely in react here

For now, mdPickers is the closest for angular.

[edbentinck]

From a UX standpoint the year selection is better in mdPickers's implementation than React's. At first glance it's not at all obvious that you can click on the year to select another one, but at least in mdPickers they included a hover state. Even then it's not blatantly obvious.

mdPickers is, imo, the best implementation so far.

@gigablox: In terms of the datepicker modal, I don't think dropdowns would be a nice fit with material design. That said, in many use cases people should probably be using inline dropdowns _instead of_ a datepicker modal. In fact, the spec page mentions it:

For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.

I think people who are complaining about the datepicker for a date-of-birth field are barking up the wrong tree (although a year selection is definitely still missing here). As the specs say, on a form it makes much more sense to use segmented dropdowns. It might not be as "glamorous" but it does the job perfectly, with fewer clicks and less confusion.

[jpike88]

@edbentinck

http://logbon72.github.io/angular-material-datetimepicker/

^ I don't see how that implementation (aside from being presented in a md-dialog) would be made too complicated by turning the year into a dropdown while still keeping the aesthetics of MD

[edbentinck]

@jpike88 It's not that it's complicated, it's just pointless and doesn't use the space well in comparison with other MD specs. The implementation in mdPickers makes for a much nicer experience imo. But obviously that's your prerogative if you prefer to use dropdowns.

[jpike88]

Just an update:

https://github.com/logbon72/angular-material-datetimepicker

^ this library now has an easy year toggle (that's obvious to the user), and in addition to its time picker, is IMO the best solution out there.

[pavankumarkatakam]

Hi @jpike88 , My application related all forms are in dialog box so the date fields are also in the dialog box in this case your plugin will not work because it is made of another dialog box.

[jpike88]

How hard would it be to have an md-dialog-like component that can sit 'above' any open me-dialogs and if so, does anyone know of a good candidate? I'll happily try to swap it out so it becomes compatible with md-dialog based forms.

[pavankumarkatakam]

Another thing to mention is not able to select seconds, so please make sure user can edit the date time input directly not only by the picker.

[d668]

so both alenaksu and logbon72 projects are not usable, they don't support IE11. Damn what to do

[d668]

And i see

Milestone:Backlog,
Assignee:No one assigned.

Does it mean this won't be fixed anytime soon? TBH If I knew there is no datepicker in the framework I wouldn't have chosen it for our project

[jpike88]

The logbon72 project is well made, I'd suggest tweaking it to handle IE11 which shouldn't take much effort

[ad-ab]

+1

[aashishk11]

+1

[regisaih]

+1

[amiral84]

Bootstrap datepicker have very simple solution. I think this kind of solution could be used here as well, but make it even better. You can check how the bootstrap datepicker works here:

[(http://eternicode.github.io/bootstrap-datepicker/?markup=component&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=2&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox)]

By clicking the top area of month and year would get yearly options and even decade options. Current look of this angular-material-datepicker is awesome :)

[d668]

@amiral84 no, the solution here is to follow Material Design guidelines for pickers but the issue is that the essential component is in a backlog and no one knows when it is released. Now I am complaining because I convinced my team to use Angular Material because it was in production release, but seems like it is more like betta

[KelvinOm]

@super-coder, try use this https://github.com/alenaksu/mdPickers. It work fine in mdDialog in last version.

But of course I would like to see something similar in Angular Material.

[d668]

@KelvinOm i already tried and they don't work in IE, there are tons of issues, particularly this makes impossible to use

[KelvinOm]

@super-coder sry, I'm was too lazy for test it in IE.:(
But i think author fix this faster than good picker will added to Angular Material.

[d668]

@KelvinOm IE is still the third most used browser

[2nise]

+1, this feature is clearly lacking

[bobwah]

+1

[mpiasta-ca]

+1

This could be useful for credit card start and expiry dates too, where the day isn't necessary, we just want the MM/YY.

[stanslaughter]

It's been almost a year. The Datepicker's current implementation I would place at a broken Beta, or even Gama level of functionality. If your users want to select a date that is not in the current month then it is not very usable.

I'd rather not go with a third party work-around. Has there been any changes ?

Note: Even the google material design spec page shows left and right month selectors

https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers

[crisbeto]

I took over this one yesterday, but I haven't gotten around to looking into it. It's on my priority list.

[rossi458]

whats the ETA @crisbeto ?

[crisbeto]

I can't give you an accurate ETA, because:

1. I'm working on first getting the datepicker to work with the floating labels.
2. This will likely be a pretty big task and I can't anticipate the issues I could run into.

[jelbourn]

@mhchen do you still have any of the work you started on this feature?

[mhchen]

Hi @jelbourn you can find my work on this feature here: https://github.com/mhchen/material/tree/feat-datepicker-month

The demo is basically working but there are some issues:

1. It would be good for someone on the ng-material core team to validate my overall approach. I am not sure about the performance and scope implications of using ng-if to swap out the month/year picker panes
2. Some CSS work is needed in order to match spec
3. The code has a lot of duplication and lacks polish
4. No tests yet

Sincerest apologies for the delays in this implementation

[crisbeto]

Tried out the demo and it looks pretty good. We could pair up and finish the rest of it @mhchen?

[mhchen]

That sounds good @crisbeto, let me know when and how you'd like to pair up

[crisbeto]

@mhchen I've tried PM-ing you on Slack.

[jrsalazar-dev]

my 80 year old grandfather died while scrolling to his birthyear. and he was only half way. I like to believe he's in a better place now, scrolling through the 70's with Jesus. I think of you when I scroll pop-pop. forever in our hearts.

[rossi458]

so has anything happened with this yet @crisbeto ?

[crisbeto]

I actually started working on it this morning.

[ghost]

Thanks Crisbeto,

Do you have any idea when it will be in live.

[mariohmol]

+1

[vicmpen]

+1

[CaahSilva]

+1

[aminkh17]

+1

[kvindasAB]

+1

[alinturbut]

+1

[rossi458]

@crisbeto can you just let us know if this will be done within the next week or so? If not we will need to go ahead and sort out our own solution. We are just asking for an estimate so we know where we stand. There are a lot of teams and projects out there waiting on this fix.

[crisbeto]

It's pretty much done, I just need to document some final details and write some more unit tests. I should have the PR up today. Note that I can't guarantee when it makes it into Material (it still needs to go through code review etc. ).

[rossi458]

@crisbeto Awesome work mate! PM your address so i can send you a beer ;)

[stanslaughter]

Soo,,,,, Ticket is closed means this is fixed ? I don't see a change in how datepicker works on the angular material demo page

https://material.angularjs.org/latest/demo/datepicker

How do we get this change moved into our code ? (or even see how it works)

[scote]

You need to be on HEAD to see the change.

[victorlambert]

Looking at the code, seems that the user has to click on month header to display years.

Have a try on https://material.angularjs.org/HEAD/demo/datepicker

[stanslaughter]

Thanks -

After you get the new year/month dialog box to come up the actual month/year selection works fine for me.

But, how to get that new dialog box to come up is really not that intuitive. Nothing visually tells you that the month name is anything more than just the name of the month.

I'll have to see if I can sneak in some kind of left/right or up/down arrow symbols next to the month name so people know it is a navigation item now, and not just text. Something visually closer to the material design spec by google

https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers

[crisbeto]

You can read more about why it doesn't look like the Material spec in https://github.com/angular/material/pull/5971.

[stanslaughter]

Thanks - I guess it is what it is, but I saw nothing there that addressed the usability problems I brought up.

Also, I would like to leave with this quote from the last thing posted on ticket #5971 before it was closed,

... We are following a specification from our internal UX people that hasn't been published to the Material Design site yet (but hopefully will soon). ...

_...commented on Nov 30, 2015_

That was over half a year ago.

[oswaldofreitas]

haha, joke! what terrible internal specification... you should listen to the community voice :)

[whittssg]

It looks great and works really well on mobile but i agree that its a little hard to find if you dont know that it is there... I knew it was there so i was randomly clicking until i found it,, Maybe some kind of animation can be added when the picker first opens that hints at the user that its an option?

[bondz]

Takes a long time for the view to load in FireFox.

[crisbeto]

The view is loading fine, but it's not being displayed. There's an issue for it at https://github.com/angular/material/issues/8557

[LeoLozes]

When I introduce a date manually, it doesn't validate it (underlined in red), and the calendar opens the original date:

Other than that, the design is very clean, and the implementation is nice, but I'm quite skeptical about the usability. I doubt the majority of the users will think about touch / click on the month label to change the year. Maybe a simple arrow would help visually:

Kudos to @crisbeto anyway and keep up the good work!

[crisbeto]

@LeoLozes Your date is considered invalid, because the Date constructor can't parse your locale date formatting (try typing in "04/21/2015"). You can override the date parsing function and do the validation yourself. I've submitted https://github.com/angular/material/pull/8162 in order to avoid confusion like this where the default formatting can't be parsed.

[LeoLozes]

@crisbeto it's a bit confusing to have the original date shown in my format (26/05/2016) and then not being able to change it in the same format. But I understand the problem. Thanks :)

[rvegas]

@ThomasBurleson @crisbeto thanks for working on this issue. Do you guys dare to guess how soon it may be ready?

[crisbeto]

@rvegas It's in master now, so it should land in 1.1.

[Muneem]

is this issue resolved?

[crisbeto]

Yes, it's in 1.1rc5. You can check it out in the demo.

[dohomi]

Nice one! Please add a symbol next to the year picker otherwise no one will ever guess to click there.

[mariohmol]

My biggest problem with that component is that users are complaining that can't do the scroll up/down to change months.

And this can happen as well when click on the year (it shows another screen to scroll up/down).

Is that possible to have a arrow down or up that when click makes the scroll up/down ?

[stanslaughter]

Strangely, you can currently scroll up and down to change months.

For some reason they tied it to the mouse wheel instead of using up/down
arrows with a mouse click.

On Thu, Jun 9, 2016 at 12:31 PM, Mario Mol [email protected] wrote:

My biggest problem with that component is that users are complaining that
can't do the scroll up/down to change months.

And this can happen as well when click on the year (it shows another
screen to scroll up/down).

Is that possible to have a arrow down or up that when click makes the
scroll up/down ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/4251#issuecomment-224968122,
or mute the thread
https://github.com/notifications/unsubscribe/AKBKe5u9_HWjmsDW1LWwpyVIj5KlM7sYks5qKE3_gaJpZM4Fu4MZ
.

_Stan Slaughter_
Senior Web Developer
stan.[email protected]

------------ Our Legal Fees At Work -----------------------------------
This communication and its contents are confidential and may contain
protected intellectual property or other information protected from
disclosure. If you are not the intended recipient you may not read, copy,
distribute or use this information. If you have received this
communication or its contents in error, please notify Findly immediately by
replying to this message and then delete this communication and its
contents from your system.

[simonshawca]

SOLUTION: copy the js from here:
https://material.angularjs.org/latest/angular-material.min.js

[mariohmol]

@stanslaughter : I dont think that using just scroll is a goode solution.. we have to remember that some users do know how to use scroll or do not have a mouse with a wheel.. its always good to have a alternative way.. like a icon that can be clicked to change up/down

[Loubot]

+1 Badly need this option

[barryvdh]

But the year is still not easy to scroll? And it still doesn't match https://material.google.com/components/pickers.html#pickers-usage which does have a select for the year.

[mariohmol]

months and years still scrolling,,, please just put a arrow.. the same that we have in specification of google material as @barryvdh showed

[m0ngr31]

This seems to work on the demos page, but doesn't seem to be working for me. Is it running a newer version of ngMaterial?

[Naxus28]

I am using the datepicker with min and max dates. Min date is set to 120 years ago (from current date). My issue is that when I click the mont/year to be able to scroll to previous dates the scrolling can't get passed 2006. If I scroll to previous years without clicking the month/year it works fine though. I updated the library like 20 days ago.

[crisbeto]

@Naxus28 that should be have been fixed last week via https://github.com/angular/material/pull/8987.

[Naxus28]

@crisbeto This is the version I am using as per bower list reference: 1.1.0-rc4-master-f9738f5 (I believe this is the latest). Should the fix be working for this version?
I just checked the datepicker code pen and it is not working there either if max date is present.

Our client complained the year scrolling is not working so we will be looking into a different datepicker solution unless this issue will be fixed soon. Would you have an estimate when this issue will be fixed?
Thanks much.

[crisbeto]

1.1.0-rc4-master-f9738f5 from Bower doesn't seem to have the fix. I'm not sure when the Bower build was last updated.

[Naxus28]

@crisbeto: bower install angular-material#master --save did the job. Thank you.

[mtpultz]

Is there a way to open the date picker directly to year/month view there doesn't appear to be an example of this in RC5, see uploaded image. Users don't appear to understand they can click the year begin scrolling quickly backwards to their date of birth.

[crisbeto]

Not at the moment @mtpultz, but it sounds reasonable. Can you make an issue for it?

[mariohmol]

and in normal calendar.. the year clickable is not something easy to get.. would be better to have a icon with the year as well?

[crisbeto]

I've tried playing around with a chevron/arrow icon next to the month name, but it didn't look good and wasn't particularly obvious that it's clickable. I'm open to suggestions on how to do it better, though @mariohmol

[mariohmol]

what about this icon in the month/year https://design.google.com/icons/#ic_keyboard_arrow_down ..

the same arrow that you have when you have the date showin.. you can put in month/year...

[mtpultz]

Hi @crisbeto I added a feature request to have the md-date-picker field open at the year/month view (#9111) to make fields like date of birth easier and faster for users to fill in.

[crisbeto]

@mariohmol I'm not sure it's obvious that it goes into another view. I think an arrow like that looks like it would scroll down instead.

[mariohmol]

to be honest.. i'm more concerned about have anything that says to the user that the month/year is clickable than choose what icon to use.. here some ideas

• https://design.google.com/icons/#ic_date_range
• https://design.google.com/icons/#ic_query_builder
• https://design.google.com/icons/#ic_keyboard_arrow_right
• https://design.google.com/icons/#ic_edit
• https://design.google.com/icons/#ic_more_vert
• https://design.google.com/icons/#ic_event_note

[Outflank-Australia]

Just thought I'd share this solution to make it clearer that the month headers are actually clickable. The chevron that has been added is white on a white background for me...

To add an instruction between the calendar header and the calendar itself, use the following CSS or something similar:

.md-datepicker-calendar{
&::before{
margin-left: 5px;
font-size: 10pt;
font-weight: bold;
content: 'Click month headers to open year view';
}
}

Unfortunately, it will still be there when the year view is open, but it's probably still a better user experience than users scrolling and scrolling through years worth of months at a time.

[binhle410]

Great, it s been a year and it looks like the feature is still ..... pending ?

[robert-king]

a date of birth picker would be useful as a separate component.
The reason it should be separate is because for historical dates we don't care about the day of the week.
For booking flights etc you might wanna know if it's a saturday or friday flight etc.