16

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

Flak DiNenno
  • 2,193
  • 4
  • 30
  • 57
Holland Risley
  • 6,969
  • 9
  • 25
  • 34
  • I am passing a correctly formatted date string like this to $http. return $http.post('api/posts/schedule', data); AND the correct format of the date string is here...data.date 2016-04-22 15:15:00 GMT +0100 (BST) in chrome in the network inspection I see the posted date is transformed to this:2016-04-22T14:15:00.000Z - as you can see the http has done the timezone for us but this is really unwanted at this stage. If you then pull this stored value later you will not know if this was made in BST or not and can't do a reverse calculation. Correct format going in but changed output :( – landed Apr 22 '16 at 16:22

1 Answers1

12

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>
    
Flak DiNenno
  • 2,193
  • 4
  • 30
  • 57
  • Thanks, any suggestions on how to "force the date formatting to your locale."? – Holland Risley Jun 22 '14 at 23:06
  • 1
    yeah... use a date filter or date template https://docs.angularjs.org/api/ng/filter/date – Flak DiNenno Jun 22 '14 at 23:08
  • 2
    I think you could also use a locale file script in your `... – Flak DiNenno Jun 22 '14 at 23:09
  • 2
    Great thanks, this appears to work: `StartDate = $filter('date')(StartDate, 'medium');` – Holland Risley Jun 22 '14 at 23:25
  • 1
    I am trying to develop an application that can work worldwide, so some more testing is needed I think, but I think stripping the date down seems to work. Thanks :) – Holland Risley Jun 22 '14 at 23:27
  • 1
    I have exactly the same issue as the OP but I am already using the filters and have also tried to add a timezone parameter...so in short my dates look right and are correctly formatted to BST but http strips the zone and does the hour calculation..but not according to california time.. I disagree in that angular ARE provided with date formatting instructions with :Wed Aug 06 2014 22:00:00 GMT+0100 (GMT Summer Time) If I get a working solution I will present this here. I am not using angular -locale file so will try that next but I dont think thats the issue after looking at the contents of – landed Apr 25 '16 at 13:11
  • I'm also facing the same issue but it is not yet resolved. I tried including the locale file but no effect on what server is getting. Anyone please help.. – pranavjindal999 Apr 20 '17 at 04:16