12

I use the datepicker to pick a date and send it to the server.

When I log the JS value I get the correct result:

Tue Mar 22 2016 00:00:00 GMT+0100 (Mitteleuropäische Zeit)

but in the ajax request it is

2016-03-21T23:00:00.000Z

I don't modify the values, just giving the object to angulars http function.

Does Angular need some configuration to handle it?

cre8
  • 13,012
  • 8
  • 37
  • 61
  • I found adding ng-model-options="{timezone: 'utc'}" to the md-date-picker to be a good solution. – Brendan Sep 26 '16 at 03:26
  • How to solve it for the material datepicker? I just tried `{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }` but that doesn't work for me. The request still looks like this: 1997-12-23T23:00:00.000Z – CptDayDreamer Jun 13 '19 at 09:39
  • Hey @Brendan, I'm unable to apply this. Any idea? – rahim.nagori Jul 10 '19 at 11:56
  • you need to import `MatMomentDateModule` instead of `MatNativeDateModule` to work `{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }` – karthik selvaraj Mar 15 '21 at 07:34

5 Answers5

7

You can try the following piece of code

dateObj.setMinutes((dateObj.getMinutes() + dateObj.getTimezoneOffset()));

No need of localization, use this code just before doing any service call. It will pass you the exact date what you selected in the datepicker.

It will work in all timezone (+) and (-),

Example: 2016-03-21 00:00:00 GMT+0100, the above said code covert it as 2016-03-21 01:00:00 GMT+0000. While on Service it converts it as 2016-03-21 00:00:00.

I think it will solve your problem.

B.Balamanigandan
  • 4,713
  • 11
  • 68
  • 130
  • Tried this hack, It works when the datepicker field doesnt have any value. But if the date has Value for example say 8th May, the value displayed would be 9th May (1 day ahead) when we edit the datepicker field for the first time in Pacific Time Zone. Can anyone please help? – Sukanya Pai May 08 '19 at 17:59
  • @SukanyaPai - I modified the answer, just try the above answer. – B.Balamanigandan May 09 '19 at 05:10
  • Maybe I'm doing something wrong but without your method I had the correct date as console log with GMT+0100. Now I get one day before with 1 hour behind and GMT+0100 so from 2019-06-13 00:00 to 2019-06-12 23:00 and this leads to a request that comes with 2019-06-12 22:00 – CptDayDreamer Jun 13 '19 at 09:48
6

Those two strings represent the same time. One is in UTC, i.e. GMT +0, which you can see from the Z ending. The other is in a different timezone, specifically GMT +1 hour.

If you had javascript date objects for both strings, and turned them into integers, i.e. seconds passed since Jan 1, 1970, UTC, you'd find them identical. They represent the same instant but in two different geographic locations.

var d1 = new Date('Tue Mar 22 2016 00:00:00 GMT+0100');
var d2 = new Date('2016-03-21T23:00:00.000Z');

Number(d1);  // 1458601200000
Number(d2);  // 1458601200000

Generally this is a good thing. Dealing in timezones gets very confusing. I find it best for a server to always deal in UTC.

Chris
  • 6,805
  • 3
  • 35
  • 50
  • 2
    I strongly suggest that you don't try. The server can store UTC, and then it can send UTC back to the browser. Javascript can construct a `Date` object from the UTC time, and it will default to showing the user a localized timezone without you having to do anything. If you _really_ have to store the timezone-specific one on the server, you can force the value to be a string before sending it by calling its `.toString()` method. – Chris Mar 01 '16 at 19:31
6

https://github.com/angular/material/pull/9410

Check out the 1.1.1+ version. This will solve your issue.

<md-datepicker ng-model="date" ng-model-options="{ timezone: 'utc' }"></md-datepicker>
Kunal Panchal
  • 1,049
  • 11
  • 19
2

If suppose am selecting a date like Tue Aug 06 2019 00:00:00 GMT+0530 (India Standard Time),
am getting 2019-08-05T18:30:00.000Z. ( which in my case previous date with respect to the selected date)
I made use of toLocalDateString() to do the job.

    // this.date = 2019-08-05T18:30:00.000Z
    const converted = new Date(this.date).toLocaleDateString(); 
    console.log(converted); // 8/6/2019 (MM/DD/YYYY) format
guru_007
  • 473
  • 4
  • 16
0

I previously had an error like this too, i solved this with removing import MatNativeDateModule and just importing MatMomentDateModule and write the provider

{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
Firman Alam
  • 1
  • 1