Angular UI DatePicker adjusting for timezone

Question

I have a date stored as a Date in SQL Server. The date shows 4/24/2014 when I query in SQL. That is correct. The date is correctly brought over to the client side in UTC. To edit that date we're using the Angular UI DatePicker. The DatePicker is adjusting that date based on my local timezone and so it is always off by one day.

I can see that it's happening. If we were editing a DateTime instead of a Date, then it would be correct to adjust for the timezone. However, in this case, I just have a Date, so I don't care about timezone and I just want to edit the date as it was in the database.

I can verify that it's adjusting for timezone. If I change the timezone on my windows machine to be UTC then the DatePicker does show the correct date.

So, the question is, is there a way to tell the DatePicker to turn off the timezone adjustments and just manage dates in UTC format so that it will work with a SQL Date instead of a SQL Datetime?

Answer 1

I had a very similar problem a while ago: I wanted to store local dates on the server side (i.e. just yyyy-mm-dd and no timezome/time information) but since the Angular Bootstrap Datepicker uses the JavaScript Date object this was not possible (it serializes to a UTC datetime string in the JSON as you found out yourself).

I solved the problem with this directive: https://gist.github.com/weberste/354a3f0a9ea58e0ea0de

Essentially, I'm reformatting the value whenever a date is selected on the datepicker (this value, a yyyy-mm-dd formatted string, will be stored on the model) and whenever the model is accessed to populate the view, I need to wrap it in a Date object again so datepicker handles it properly.

Answer 2

Solution found here: https://github.com/angular-ui/bootstrap/issues/4837#issuecomment-203284205

The timezone issue is fixed.

You can use:

ng-model-options="{timezone: 'utc'}"

To get a datepicker without timezone calculation.

EDIT: This solution does not work since version 2.x, however it did perfectly fine until then. I couldn't find a workaround and still am using version 1.3.3.

EDIT 2: As Sébastien Deprez pointed out in the comments below, this has been fixed in version 2.3.1. I just tested it and it works great.

<input  uib-datepicker-popup  ng-model="$ctrl.myModel"  ng-model-options="{timezone: 'utc'}">