Angular Material DatePicker: Date becomes one day before selected date

Question

I'm using latest Angular 4 and Angular-Material2-2.0.0-beta7. This is my template using MdDatePicker:

<md-input-container fxFlex="33" class="birthday-container">
    <input mdInput name="birthday" placeholder="Birthday" required [(ngModel)]="member.birthday" [mdDatepicker]="birthdayPicker">
    <button mdSuffix [mdDatepickerToggle]="birthdayPicker"></button>
</md-input-container>
<md-datepicker #birthdayPicker></md-datepicker>

In app.module, here is the provider:

{provide: DateAdapter, useClass: NativeDateAdapter}

And member.birthday is Date type. But when JSON.stringify(member.birthday), it becomes one day before the selected date. For example:

Select 2017-4-1 from date picker, and the stringified result is 2017-03-31T13:00:00.000Z.

This post raised the same question but I'm not sure how to apply moment.js to the code.

Answer 1

When we choose a date in the date picker, the selection is stored and manipulated in GMT (according to Greenwich timezone) time, but displayed back to the user in the formatted representation, taking into account user's current timezone. So stored and displayed dates are different (except of the users within timezone +0, like Greenwich).

When stringifying JS Date object, we get clear Greenwich timezone time, we can see it at https://time.is/GMT. What you probably expect to see is time representation formatted with your current timezone. See difference in my example.

// get current time
let date = new Date();
console.log('NATIVE JS DATE TIME', date.toString());
console.log('STRINGIFIED TIME', JSON.stringify(date));
console.log('FORMATTED TIME', `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);

you can use very convenient moment's format() function for displaying date.