Question:

I'm using angular bootstrap timepicker. The problem I'm facing is that I have a mismatch between the view and the model. As you can see from the example, I chose 2015-05-07 but the model is a day behind.

<div dir="ltr" class="col-md-3 datePickerComponent"> <div>{{payments.user.start_dt}}</div> <span dir="rtl" class="datePickerLabel"> תאריך התחלה </span>&nbsp; <p class="input-group"> <input ng-disabled="true" dir="rtl" ng-change="payments.GetPayments()" type="text" class="form-control" datepicker-popup="dd-MM-yyyy" ng-model="payments.user.start_dt" is-open="payments.opened_start" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="payments.open_start($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span>

</div>

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/spIUI.jpg" data-original="https://i.stack.imgur.com/spIUI.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Apply the date filter to the value in your view

<div>{{payments.user.start_dt | date : format : timezone}}</div>

e.g.

<div>{{payments.user.start_dt | date : longDate}}</div>

see <a href="https://docs.angularjs.org/api/ng/filter/date" rel="nofollow">AngularJS Docs - Date Filter</a>

I also faced this issue here <a href="https://stackoverflow.com/questions/37827372/angular-ui-bootstrap-date-mismatch-between-model-datepicker/37849456#37849456" rel="nofollow">Angular UI bootstrap date mismatch between model & datepicker</a>

Adding the date filter to the view will just solve the problem of display. If you are sending it to a Rest API you would still get a day behind on the server.

To solve it, you will have to add this to your date picker.

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