Angular UI DatePicker adjusting for timezone

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.

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'}">

First I'd like to point out that the bootstrap's localized date picker is stupid and useless, nobody needs something like this, all you really want is a date yyyy-MM-dd, I see no point in localizing a date when you don't need time.

I don't try to bend the client side to fit the server's timezone, that's overkill and doesn't work.What I do instead is let the user work in it's timezone and format the date before sending it to the server like this:

fields.date = dateFilter(trans.date, 'MM/dd/yy');

This ensures that whatever the user sees in the date picker I receive on the server side. Crucial if you ask me.If you need to set min and max dates, again, just set them in the user's timezone like this:

$scope.datepickerOptions.minDate = new Date(dateFilter(minDate, 'yyyy-MM-dd\'T\'00:00:00', serverTimezone));$scope.datepickerOptions.maxDate = new Date(dateFilter(maxDate, 'yyyy-MM-dd\'T\'00:00:00', serverTimezone));

minDate and maxDate are server localized dates and the serverTimezone is the server's timezone offset ('+0500' for example).

Hope this helps!