Angular UI DatePicker adjusting for timezone

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

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.

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!

Setting timezone to null worked like a charm for me. It just keeps the selected date as it is.

ng-model-options="{timezone: null}"

Note: Tested on all timezones & the uib version I'm using is 1.3.3