feat(datepicker): year view, open on focus, bug fixes

[crisbeto]

• Adds the ability for users to switch years quicker by clicking on the month header. Cheers to @mhchen for helping me get started.
• Adds the ability to open a datepicker by focusing the input.
• Fixes alignment issues, if the user has set the box-sizing: border-box on everything.
• Fixes cases where the calendar's width could be set to 0.

Fixes #4251, #4650, #8547, #8030, #8557.

[crisbeto]

@ThomasBurleson how should we proceed with reviewing this one? I had to shuffle around a lot of code in order to avoid duplication.

[jelbourn]

Add braces

[jelbourn]

High level LGTM from me, thanks!

[crisbeto]

@ThomasBurleson @topherfangio @EladBezalel @devversion I've worked through the comments from Jeremy. Can you give me some feedback on this?

[EladBezalel]

I think we should avoid broadcasting, but if it's inevitable I think it should be md-calendar:parent-changed

You can avoid broadcasting by providing a registerChanges that you provide on the controller that gets a callback and saves it in a callback array and when the change happened go through the callback array and call it

[crisbeto]

Doing a registerChanges method is basically the same as broadcasting it on the scope, except that we'd need to handle keeping track of the callbacks and cleaning up afterwards ourselves.

[crisbeto]

It should be good to go now @ThomasBurleson.

[topherfangio]

Overall, I think this is really great and helpful!

A couple of thoughts from a UX perspective:

1. I think the year should have some additional feedback that it is clickable. Not sure the best way to do this, but maybe just changing the background on hover is enough (like we do with the days).
2. Without an animation between the two, it feels very jumpy and "un-material" IMO. Would it be fairly easy to add a slide or simple fade transition between the two?
3. Would it be possible to re-use the "day of the week" header area to provide a back button/icon? Right now, because the header disappears, it changes the size of the picker which feels odd, and we also don't give users an easy way to get back to the standard view if they decide they don't want to change anything after all.

Just some of my own personal thoughts 😄

[crisbeto]

@topherfangio

1. Definitely, but I didn't find a nice way of doing it. I've been trying stuff like this, but I wouldn't say that it looks good. I was leaning more towards something like this.
2. That sounds interesting! I couldn't get it to work nicely on the first try (for some reason the one with the datepicker didn't transition at all and the one outside a datepicker wasn't rendering the month content immediately), but I might be able to get it working.
3. I'm not sure about this one, that's a would be a pretty big back button.

[topherfangio]

1. I think if the button was smaller (like didn't touch the edges) it would work pretty well. I'm not sure the right chevron icon is enough to tell people (unless perhaps it appears only when they hover; I actually like that idea).

2. I was just thinking a back icon on the left side; the button wouldn't take up the whole width; just a white background with the left chevron/button would be enough 😄

[ThomasBurleson]

@crisbeto - Should i merge this now ?

[crisbeto]

I'd say so @ThomasBurleson. Once we have this set up, making improvements should be a bit easier.