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.

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

[Splaktar]

I have a CodePen with 1.1.1 and it shows that both the datepicker's input and panel show the wrong date.

In my 1.1.5 CodePen the input displays the proper date (taking into account ng-model-options="{ timezone: 'utc' }"), but the datepicker panel does not account for the ng-model-options="{ timezone: 'utc' }" and shows the wrong date.

So this isn't a regression, it's just that the last enhancement didn't quite go far enough.

[Splaktar]

After looking at #9410 and https://github.com/angular/material/blob/master/src/components/datepicker/js/datepickerDirective.js a bit more, it looks like this is just a side effect of #10431.

That issue will need to be fixed first, then https://github.com/angular/material/blob/master/src/components/datepicker/js/datepickerDirective.js#L107-L121 can be updated to pass the ng-model-options into the md-calendar.

[gilad905]

Not the exact behavior of the original post, but pretty close:
https://codepen.io/gilad905/pen/BYywbR

When selecting a date, date is set to one day before the selection.
The earliest version I found where this reproduces is v1.1.2, v1.1.1 is OK.

[Splaktar]

This is no longer blocked, but we need to fix #11919 before digging into this.

[Splaktar]

This is fixed in master. Please try out the fix (before we release it) via npm install http://github.com/angular/bower-material#master --save or updating your package.json with "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master",.

If you find any issues, please report them via GitHub issues ASAP.