Why is Angular date filter displaying wrong date?

Question

I'm using a date input field, and formatting the selected date in my ui with Angular. But the formatted date is always 1 day less than the selected date. Why is that, and how can I fix it?

HTML:

<div ng-app="miniapp">
    <div>
    <label class="control-label" for="inputStart">Start Date:</label>
        <input type="date" id="inputStart" data-ng-model="startDate" /><br />
        Selected: <span>{{ startDate }}</span><br />
        fullDate: <span>{{ startDate | date:'fullDate' }}</span><br />
        mediumDate: <span>{{ startDate | date:'mediumDate' }}</span><br />
        MMMM d yyyy<span>{{ startDate | date:'MMMM d yyyy' }}</span>
    </div>    
</div>

JS:

var app = angular.module('miniapp', []);

I have a fiddle that demonstrates the issue: http://jsfiddle.net/wittersworld/uY3s9/

EDIT: I updated the fiddle with a working solution: http://jsfiddle.net/wittersworld/uY3s9/2/

@Stewie that's because Sarajevo is GMT+1. If you try the OP's fiddle at 0:05 your time when GMT is 23:05 the previous day, it will look like the fiddle is showing one day later than you entered. — Ray Toal
– Ray Toal, Commented Jun 8, 2013 at 20:54

Ray Toal · Accepted Answer · 2013-06-08 20:48:46Z

15

This is a timezone issue.

If you enter a date of, say, June 8, 2013 into your date picker, that's midnight GMT. If you live west of England, say, in the U.S., it's June 7, 2013.

Change the line

{{ startDate | date:'fullDate' }}

to

{{ startDate | date:'medium' }}

to see the time!

answered Jun 8, 2013 at 20:48

Ray Toal

88.7k20 gold badges186 silver badges245 bronze badges

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

2 Comments

witters Over a year ago

Thanks Ray! That got me on the right track to a solution. I found an article that helped me the rest of the way, and updated the fiddle with a working method. techrepublic.com/article/…

jeffgabhart Over a year ago

Working link: techrepublic.com/article/…

Collectives™ on Stack Overflow

Why is Angular date filter displaying wrong date?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related