Angular UI DatePicker adjusting for timezone

angularjs datepicker timezone angular-ui
Brian picture Brian · Mar 25, 2014 · Viewed 52.4k times · Source

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

weberste picture weberste · May 6, 2014

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.

Related questions

How to send AngularStrap datepicker value without timezone?

I'm wondering if it's possible to use AngularStrap's datepicker without it keeping the user's locale's timezone information. In our application we want to handle Contract objects that have an expiration date. When adding or editing the contract object, there is …

Read More
Angular bootstrap datepicker date format does not format ng-model value

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every …

Read More
how to bind Bootstrap-datepicker element with angularjs ng-model?

Here is the html for the date field : <div class='form-group'> <label>Check out</label> <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out"> </div&…

Read More