Release date in angular

Question

I use HTML5 to select a date. After selecting a date, the ng model shows an earlier date, not the currently selected date.

<input type="date" ng-model="dateModel" /> 

When I select the current date, the ng model has 2015-05-13T18: 30: 00.000Z instead of 2015-05-14. If I use in jQuery, it is stored correctly as 2015-05-14

How can i solve this?

Plunker - AngularJS

Plunker - jQuery

Answer 1

This is the correct date for your version of Angular, however the date is formatted in UTC, which may seem incorrect if you are not fully aware of this.

The time zone is always zero UTC offset, as indicated by the suffix "Z".

UTC source

Take a look at Angular date filters . There are many options out of the box, and almost any desired format can be obtained - but most importantly, it is allowed for your time zone. For example...

 {{dateModel | date:'shortDate'}} // -- prints 5/14/15 {{dateModel | date:'yyyy-MM-dd'}} // -- prints 2015-05-14 

Plunker link

---

Learn more about explicitly providing the timezone parameter and trust the browser to resolve our time (Angular docs)

 {{ date_expression | date : format : timezone }} // -- template binding $filter('date')(date, format, timezone) // -- javascript 

The time zone to be used for formatting. He understands UTC / GMT and the continental abbreviations of the US time zones, but for general use, use the time zone offset, for example, “+0430” (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the browser time zone will be used.

---

If you prefer to explicitly define the time zone with ngModelOptions rather than using filters, you can do this with the following

 <input type="date" ng-model="dateModel" ng-model-options="{timezone: timezone}" /> 

 var date = new Date() $scope.timezone = ((date.getTimezoneOffset() / 60) * -100) // eg -400 EDT 

See this answer for an explanation of manual calculation logic.

Plunker Link - with ng-model-options

Answer 2

AngularJS sets the model to UTC date-time. I think this is the problem you need to check: http://github.com/angular/angular.js/issues/8447

So, for my time zone, if I set ng-model-options="{timezone: '-0200'}" to the input, I get the same date with the jQuery version: http://plnkr.co/edit/Qesmucv4aU5Yqu9sxbtp? p = preview

Answer 3

 {{dateModel | date : 'yyyy-MM-dd'}} // {{ date_expression | date : format : timezone}}