Bento de Gier Bento de Gier - 1 year ago 200
AngularJS Question

Angular date problems

Please see the following example:

<div ng-app="app" ng-controller="MainController">
<div class="col-sm-3">
<input ng-model="" name="date" type="date" placeholder="" class="form-control input-md" required="" max="<% Date | date:'yyyy-MM-dd' %>" ng-change="changeDate()">
<% | date %>
<% | date : medium : PST %>

I'm in GMT+2 timezone (CEST) and GMT+1 in winter time (CET).

When I select today from the input field (Jun 30 2016) the output Angular produces is UTC time. So it subtracts 2 hours from the actual time. But because we're only selecting the date the time is always 00:00:00.

So subtracting 2 hours from 00:00:00 will result in a date of the day before.

How do I fix that? I tried manually adding the time to that timestamp which works. But then the problem still exists between midnight and 2 AM.


I'm currently using the following workaround:

Since we only need the date I'm just manually setting the time to 6PM so the 1 or 2 hour difference doesnt cause the date to change.

d.setHours('18', '00', '00');

Answer Source

A JavaScript Date instance is always relative to your current location. However, you only want to use the day-part and not the time-part, so what you could do is always use one and the same timezone when inputing and displaying the date. Just choose a timezone, e.g. UTC. You can make sure that the time will be inputted using UTC (instead of the browser's default) by adding that as a model option:

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

Make sure that you also use that timezone when displaying the date:

<% | date:'mediumDate':'UTC' %>

See my fork with this update of your Plunker:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download