Material: md-datepicker scrolling not obvious

[dmcbcc]

All of the feedback I've gotten from my users on the datepicker is that no one realizes that it is meant to be scrollable. They try clicking on the month at the bottom, only that does nothing, and then they try dragging, and that does nothing.

Is adding a scrollbar possible? None of my attempts at implementing this via CSS were successful.

I'm only testing this with about 20 users now, but I'm going to be rolling this application out to a few hundred in the next few weeks, but unless this changes, I'm going to have to implement something else.

[dmcbcc]

I did a bit more looking with 11.1 and found out how to make the scrollbar visible again.

Here is what I changed in the css file with a few comments. Now it's a little uglier but it is certainly obvious that it will scroll.

.md-calendar-scroll-mask {
  display: inline-block;
  /_overflow: hidden;_/  \* Removed this line *\
  height: 308px; }
  .md-calendar-scroll-mask .md-virtual-repeat-scroller {
    overflow-y: scroll;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch; }
    .md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar {
      /_display: none;_/ } /* removed this line for Chrome, otherwise the scrollbar would still not display */
  .md-calendar-scroll-mask .md-virtual-repeat-offsetter {
    width: 100%; }

.md-calendar-scroll-container {
  box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2);
  display: inline-block;
  height: 308px;
  width: 361px; } \* increased from 341px to 361px */

I'm going to leave this open but now that I know how to make this work for my users, I consider this issue closed. I'll probably move the changes into my css for 12.0 and future releases, if this is not resolved in the main branch.

Thank you.

[csvan]

+100, was just about to open the same issue.

We have carried out both internal and external testing on a current app, and the overwhelming majority of users had _no idea_ that they had to scroll in order to switch time scope. In fact, when I added the module to the app, one of the internal _testers_ had to point out to me that scrolling was necessary - I simply thought the module was in an early stage and lacked it, and was planning to implement it myself. Several even reported this as a bug ("no way to select different month/year"). It should definitely be made more obvious.

[Bodom78]

I only realized myself when I scrolled to move the page down while a datepicker was open. Really does need some indication of how to navigate the component.

[RolandHeath]

This was discussed in #4178, also a possible dupe with #4792
It does seem to be coming up quite a lot.

[jelbourn]

Is this feedback based on the 0.11.1 release? For the most recent iteration, we've added a new opening animation and a shadow to help cue the scrolling behavior.

[dmcbcc]

Yes sir it is. I've got to be honest, after I switched to 11.1, I didn't notice any changes to the datepicker's view.

This is the version line of my angular-material.css file:

• v0.11.1-master-eacca5e

Maybe that's not the 11.1 final? I'll double check that.

If that is the final, then I'd have to politely suggest that displaying a scrollbar is better than not, especially when the object does in fact scroll.

Thank you.

[RolandHeath]

@dmcbcc It might be worth checking the datepicker view in your project against the one in the docs. I've just had a look, and the difference seems to be quite noticeable to me - but a different version of angular-animate could potentially upset that.

I've also noticed that you can actually see the start of the next month at the bottom of the new datepicker (in the docs) - that gave me a solid cue, as well.

[dmcbcc]

@RolandHeath I did as you asked and took a look at the datepicker control on the demo page today and I did notice a difference, particularly in the opening animation. But I still think it's nowhere near enough to obviate the scrollbar. Heck, I've got users that flat out don't use the mouse wheel at all.

I think making it an option for those who want it (scrollbar=boolean visibile attribute) would work, if the development time can be afforded.

Thank you.

[ayoubjs]

Hi,
I noticed the recent animation change wich makes the scrolling more obvious but certain (most?) people are looking for arrows to switch months (like in the material spec).
I think angular's anchorScroll would be a fast/easy way of achieving that.

Thank you

[RichOren]

I'd like to see this component follow the Material Specs. It is nice... but its use-case is limited to Components with white backgrounds and mainly forms.

[jornncc]

First of all, let me say that we love what you guys are doing with Angular Material!!! It's been a great tool to use in our app.

Background
We just came through sales enablement of our application using Angular Material. From that work we learned that the one widget that (from what I heard) all our go to market engineers had trouble with was the Date Picker. I found this strange, and looked into this more closely. From working with our end users, I personally saw many click the down arrow on the date picker to expose the calendar and sit there - looking at the calendar panel searching for a way to navigate backwards in time.

When I asked, select July 1st (calendar defaulted to todays date - Nov 18th) and they said out loud _'How? Where are the buttons to do that???'... _

After being a little puzzled by this user experience, I started researching the issue. I found posts on this here and there where people had the same first time experience. I noticed that a change was made to extend the calendar panel to show the next month first row to let the user know that there is 'more stuff there - you just need to scroll to get there...' This was a good improvement for sure, but I believe still not enough.

Why did I not experience the same???
I have struggled with this question for a few days now and I believe I've come to one answer that makes sense to me: I'm a mac user, have been for years. I have been trained to not need buttons or scrollbars to tell me that I can scroll something to navigate... If it looks like I can scroll something, I try it. Windows users on the other hand, they click scrollbars to navigate, they click buttons to navigate. On a mac you use two fingers... scroll up, scroll down. 95% the users on our Go To Market Team are Windows users so this makes sense to me.

Finding Alternative xx-datepickers?
We have been asked (to my horror) to look for a different date picker for our tool. We do have a need for showing a date picker in both a standard form + in a modal ($mdModal) w/o having to deal with the issue of a 2nd modal closing the current modal dialog. Many implementations of a date picker shows the picker in a modal dialog - which will force the current dialog to be closed. I do not have the time in our schedule to implement a tie in back to the original modal from the date picker modal closing... at least not at this time in our schedule.

Forcing a Scrollbar?
We looked briefly into the idea of 'can we force a scrollbar' to show 100% of the time to let the user know that they are in a scrollable area. But this is not an easy thing to do (and we also do not want to do this to be honest) since the md-datepicker is using the Virtual Repeat panel as it's calendar surface.

Example
Would it be possible to support the ability to add up and down arrows like shown in this example to illustrate to the end user that they can click those to navigate up or down? Each click on the up button would scroll the calendar canvas back to the previous full month and place the month at the top of the calendar canvas. A directive toggle such as md-show-navigation-arrows=true|false would be awesome!!!

Our current version of angular material: 0.11.2-master-8cc6b84

Thanks!!!

[dmcbcc]

Well, it's been 5 months and the calendar widget is still terrible for people who don't natively use their mouse wheel, and for people without a mouse wheel.

Now that it's in the backlog, what information are we missing to get it re-added to one of the milestones that actually has a due date?

[csvan]

@dmcbcc well, you COULD make a PR...I would be willing to collab on it since I would like this changed as well.

[jelbourn]

Datepicker UX changes are on hold while the Google UX folks are reworking the (unreleased draft) spec that the md-datepicker is based on.

[johnrix]

Perhaps a bit late to the party given the above note, but I just went to use the datepicker control myself for the first time and was similarly frustrated by the UI also. If I am frustrated by it, I know my end users will tear their hair out (and consequently, it will come straight back to me as a bug).

One important point though which I am very surprised does not seem to have been picked up on here is that while yes, you can use the scroll wheel to select other dates not currently visible, selecting a date significantly in the past or future (for example, date of birth for anybody more than a couple of years old!) is an abysmally painful operation, requiring endless scrolling.

I did find after a fashion that it is possible to click-and-drag the control in some fashion to perform infinite scrolling and this gets the job done more quickly, but this was very un-obvious and also very pernickety - sometimes it would work and other times not. It seemed to depend upon where you clicked but there was no consistency. (I only tested this in anger on Chrome.)

Am I missing something? Even just providing a separate year selector would make this so much easier. Hopefully this issue will be taken into consideration in the re-worked spec.

[rvarbanov]

What is the status of this issue? Is there any progress made on that? What are those Google UX specs?

[jon64digital]

Just came here to say that I tried to use the datepicker for the first time today and actually couldn't use it on my laptop and I don't have a mousewheel, just a trackpad which doesn't have gestures. I thought it was totally broken until I tried it on an iPad.

[LeoLozes]

@johnrix the year / month selector you're talking about / asking for is being discussed in a separate issue (#4251)

[patorjk]

I gave a link to an app I created and one of the main feedback points was that the datepicker was unintuitive. My boss said it look him several minutes before he realized he could use the scroll wheel.

I think this control is awesome - it looks and works great, however, the UX for scrolling between months seems to not be very intuitive to some users. I think some arrows like @jornncc is suggesting would improve the UX for this.

[redrick-tmn]

My attempt to bring scrollbar to the date picker using angular decorator. Hope it helps somebody. My boss said he has no wheel on his mouse))thats why I did it))
http://codepen.io/redrick-tmn/pen/wJKJmM

[felipeplets]

Any news on the topic?

@redrick-tmn I could not find your codepen. Can you share it again?