CODEWITHSUNDEEP
javascriptangularjsdatepickerangular-material
cre8
cre8

Reputation: 13562

Wrong date with angular material's date picker

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?

Upvotes: 13

Views: 27407

Answers (4)

guru_007
guru_007

Reputation: 473

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

Upvotes: 2

B.Balamanigandan
B.Balamanigandan

Reputation: 4875

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.

Upvotes: 7

Kunal Panchal
Kunal Panchal

Reputation: 1059

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>

Upvotes: 6

Chris
Chris

Reputation: 7278

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.

Upvotes: 6

Related Questions