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/

Answer 1

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!