datepicker: md-calendar panel should respect ng-model-options

[ericsvendsen]

Actual Behavior:

• What is the issue? *
  An md-datepicker with the timezone set to UTC still shows the localized date as selected when viewing the popup calendar.
• What is the expected behavior?
  The popup calendar should highlight the correct date in the context of the model's timezone

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/anon/pen/NjxgmR
• Details:
  Click the down arrow or the calendar icon to see that the previous day is shown as selected in the calendar view rather than the specified day.

AngularJS Versions: *

• AngularJS Version:1.6.4
• AngularJS Material Version:1.1.3

Additional Information:

• Browser Type: *Chrome
• Browser Version: *57.0.2987.133
• OS: *MacOS
• Stack Traces:NA

[SocVi100]

I'm hitting the same error since I updated to v1.1.4 yesterday. This wasn't happening on v1.1.1 so it may be a regression... On my timezone the datepicker show one day less than the actual date.
@topherfangio I remember that this bug was solved some months ago, maybe it's been a bad merge lately?

[rajathms]

@ericsvendsen @SocVi100 Guys you found the solution or a work around for it.
same issue here, material version 1.1.4

[ericsvendsen]

@rajathms unfortunately no. I have noticed that this only happens when the control is initialized. Once you select a date, then all behaves as expected. There's obviously still a bug here but I don't know why it only happens on init. This behavior is in the codepen I posted above.

Regardless, I ended up just creating my own Angular datepicker control since I develop a lot of apps that rely solely on UTC.

[jaybee7]

I'm using material 2.0.0-beta.8.

Having this same issue. Any update?

[rajathms]

@jaybee7 hello, i took some inputs from @ericsvendsen

A small hack worked for me, i went and comment one line in angular-material.js ( this.focusAfterAppend.focus(); )
under this function

/** Generate and append the content for this month to the directive element. */
 CalendarMonthBodyCtrl.prototype.generateContent = function() {
   var date = this.dateUtil.incrementMonths(this.calendarCtrl.firstRenderableDate, this.offset);

   this.$element
     .empty()
     .append(this.buildCalendarForMonth(date));

   if (this.focusAfterAppend) {
     this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS);
     // this.focusAfterAppend.focus();
     this.focusAfterAppend = null;
   }
 };

which worked for me, but i don't suggest you to do the same
I'm waiting for community to fix this bug.
Thank you.

[SocVi100]

This bug is almost a year old, it has a bunch of open issues, it has an approved pull request solving it that's been there since last summer AND NOBODY DOES NOTHING TO MERGE IT.
This project (Angular Material) is the most disastrously managed I've ever seen. To whoever rules this, please consider changing your profession, you'll make a lot of people happy.

[Splaktar]

@jaybee7 this repo is for AngularJS Material. You can submit issues against Angular Material here.

[Splaktar]

@SocVi100 While I can certainly understand your frustration, please respect the Code of Conduct by avoiding personal attacks.

There is no PR linked in this issue. Can you please link the PR that you are referencing here? I'd love to take a look at it ASAP.