Angular JS – Date changes when submitting to $http – Timezone issue

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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>
    

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply