Datepicker popup UTC Timezone issue

[msosa]

Bug description:

I've noticed a weird issue when using the UTC timezone. For users west of UTC, like NY, adding the ng-model-options to UTC things work as they should.

However when you set your local timezone to something like UTC+2 and you open the popup that contains the ng-model-options, the date is highlighted incorrectly to the day before. The popup without the ng-model-options highlights the day correctly

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/Y28iutmgkWkCINTUvRoq?p=preview

The first popup is the one without the ng model options, the second one contains it.

Version of Angular, UIBS, and Bootstrap

Angular:
1.5.8
UIBS:
2.1.3
Bootstrap:
3.3.6

[msosa]

Another thing I just noticed is if you select a date from the popup X amount of times where
X * (your offset) = more than 24 hours, on that click it will select the wrong date.

The offset seems to be constantly getting added and never zeroed out

[mark-mccullough]

+1

[antch]

Unfortunately there seems to be some issues with the timezone handling since 2.0.0 but your first post sounds like the same root cause as this issue that I just filed: #6252

Try setting your ng-model-options on a parent element of the input (instead of on the input itself), and see if that works.

[noullet]

Hi,

I tried to track down the origin of this issue. It seems to come from

bootstrap/src/datepickerPopup/popup.js

Line 336 in 997813f

return dateParser.fromTimezone(date, ngModelOptions.timezone);

In UIBS 1.3.x the conversion was dateParser.toTimezone(...) and it is now dateParser.fromTimezone(...) in 2.2.0.

The date converted here was created by dateParser.parse, which used new Date(...)so the date uses the browser timezone. It makes no sense to read this date from the ngModelOptions timezone, but you probably want to convert it from the browser timezone to the ngModelOptions timezone.

Changing the line back to dateParser.toTimezone(...) does the trick for me.

It would be nice if someone from the UIBS team can look into this issue and review the workaround I suggest.

[wesleycho]

@noullet this sounds correct - pushing change shortly.

[msosa]

This did not seem to fix any of the two issues, am I doing something wrong? Here is new plunk with updated UIB code.

http://plnkr.co/edit/i2yg2cwHg7GC28Z7FhcC?p=preview

The date on the popup is still incorrect and clicking the date multiple times will still change the date.

[wesleycho]

Reopening to investigate.

[noullet]

I mistakenly believed that my issue had the same root as you @msosa, but it seems to be a third Timezone issue, independent from yours, sorry for the confusion...

[avainola]

Seems that using ng-model-options="{timezone: 'utc'}" is not working with angular 1.6.x.
Could be cause by this breaking change in angular:

ngModelOptions:
Due to 296cfc, the programmatic API for ngModelOptions has changed. You must now read options via the ngModelController.$options.getOption(name) method, rather than accessing the option directly as a property of the ngModelContoller.$options object. One benefit of these changes, though, is that the ngModelControler.$options property is now guaranteed to be defined so there is no need to check before accessing.

This does not affect the usage in templates and only affects custom directives that might have been reading options for their own purposes. If you were programmatically accessing the options, you need to change your code as follows:

Before:
var myOption = ngModelController.$options && ngModelController.$options['my-option'];
After:
var myOption = ngModelController.$options.getOption('my-option');

[ksiwak2e]

Yes this is problem after this change. I debug the problem on example of Bootstrap Datepicker version 2.3.1. In file ui-bootstrap-tpls in line 3044 they use
return dateParser.toTimezone(date, ngModelOptions.timezone)
but the timezone is undefined so the date is parse invalid. We will must use ngModelOptions.getOption('timezone').

But it can be also a problem for other libraries that use access to model options directly by object not by getter.