angular bootstrap datepicker mismatch between view and model

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>
                    </p>
                </div>

enter image description here

rmuller · Accepted Answer · 2015-05-06 07:56:42Z

1

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 AngularJS Docs - Date Filter

answered May 6, 2015 at 7:56

rmuller

1,83712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdul Rehman Sayed Over a year ago

I just ran into the same problem. but why does this difference occur ?

Community · Accepted Answer · 2017-05-23 10:33:59Z

0

I also faced this issue here Angular UI bootstrap date mismatch between model & datepicker

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

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Jun 16, 2016 at 3:39

Abdul Rehman Sayed

6,7129 gold badges51 silver badges79 bronze badges

Collectives™ on Stack Overflow

angular bootstrap datepicker mismatch between view and model

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related