69308

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>

</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" />

Answer1:

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>

Answer2:

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

Recommend

  • Why is employee_id not being inserted into database
  • Using Outputs From Two Other Module (Verilog)
  • iTextSharp - very large table memory leak
  • Have a expression error in ui-sref
  • Angularjs - Pagination appear after search filter
  • smart-table Angular module unable to sort
  • How to assign value to angular pagination custom template?
  • How many Flip Flops will this code produce?
  • Implement keyboard navigation in lists using AngularJS
  • AngularJS- How to pass data from one controller to another on ng-click()?
  • AngularJs ng-repeat filtering by a deeper tier of data
  • How do one only submit click event (div), when using jquery live function?
  • Bootstrap navbar stays expanded on route change
  • show popover on input validation in angularjs
  • how to display   in Mozilla using XSL.
  • How to add regEx in angular filter
  • Change attribute of custom directive
  • Angular page doesn't refresh after data is added or removed
  • Not able to display correct data in table -AngularJS
  • Is it possible to get the word under the mouse cursor in a ``?
  • IE10 strips out hashtag from the URL
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • Meteor helpers not available in Angular template
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Insert into database using onclick function
  • Read text file and split every line in MSBuild
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • what is the difference between the asp.net mvc application and asp.net web application
  • Web-crawler for facebook in python
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Circular dependency while pushing http interceptor
  • Matrix multiplication with MKL
  • Linker errors when using intrinsic function via function pointer
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • embed rChart in Markdown
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs
  • Python/Django TangoWithDjango Models and Databases
  • Net Present Value in Excel for Grouped Recurring CF