Angular Material DatePicker : Date becomes one day before selected date

Question

我使用的是最新的 Angular 4 和 Angular-Material2-2.0.0-beta7。这是我使用 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>

在 app.module 中，这里是提供者:

{provide: DateAdapter, useClass: NativeDateAdapter}

而member.birthday是Date类型。但是当JSON.stringify(member.birthday)时，就变成了选择日期的前一天。例如:

从日期选择器中选择2017-4-1，字符串化结果为2017-03-31T13:00:00.000Z。

This post提出了同样的问题，但我不确定如何将 moment.js 应用于代码。

Answer 1

当我们在日期选择器中选择一个日期时，选择将以 GMT(根据格林威治时区)时间存储和操作，但会以格式化的表示形式显示给用户，同时考虑到用户的当前时区。因此存储和显示的日期不同(时区 +0 内的用户除外，如格林威治)。

当字符串化JS Date对象时，我们得到清晰的格林威治时区时间，我们可以在https://time.is/GMT看到它.您可能希望看到的是使用当前时区格式化的时间表示。查看我示例中的差异。

// 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()}`);

可以用很方便的时刻的format()日期显示功能。