Angular JS - Date changes when submitting to $http

I am having a strange problem where a Date changes when it is passed to API through $http.put, I suspect a timezone issue:

Datepicker triggers ng-change event - console.log:

Tue Jun 10 2014 00:00:00 GMT+0100 (GMT Summer Time)

Passed to API using Angular $http.put...

When it hits Fiddler:

StartDate=2014-06-09T23:00:00.000Z

As you can see the date changes from 10th June to 9th June.

How can I stop this change of date? Is it the timezone causing the change? Both the API and client side are running on Localhost.

Further to this:

When the field is clicked a second time and the datepicker launched / date selected, this second time the problem does not appear:

Console.log:

Wed Aug 06 2014 22:00:00 GMT+0100 (GMT Summer Time)

Fiddler data received:

StartDate=2014-08-06T21:00:00.000Z

I think it is a TZ issue, b/c the difference between your GMT+0100 and your StartDate=2014-06-09T23:00:00.000Z is 5 hours.

The issue:

Your local time is currently BST (British Summer Time) equivalent to GMT +1

This is going to be the default time when you make your API call.

However, the API was written by Google in California, and they are rather egocentric. Therefore, they're automatically converting the time since you're not providing any date formatting "instructions".

In other words, Chrome does the conversion for you nicely when you print to the console.log(), but when you make your $http.put, Angular, without explicit formatting for you, makes the call using it's default TZ (which is PST)

Resolution

You need to force the date formatting to your locale.

Angular template

{{ date_expression | date : 'yyyy-MM-dd HH:mm:ss'}}

In JavaScript

$filter('date')(date, 'yyyy-MM-dd HH:mm:ss')

using localization

<html>
  <head>
    <title>My Angular page</title>
    <script src="angular-locale_en-uk.js"></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>