日期在Angular 7中回溯了3个小时

Question

我正在使用Angular7。我有一个日期选择器。例如，我选择2019-03-26。但是，当我单击save按钮时，控制台将显示为2019-03-25T21:00:00.000Z。 回溯3个小时。该错误的原因可能是什么？

STACKBLITZ

我正在使用primeng 7.0.5。

Answer 1

实际上，发生这种情况是因为您看到了Stackblitz服务器模拟浏览器窗口的console.log，因此它通过服务器模拟控制台日志在UTC时区中打印DateTime。

{birthDate: "2019-03-15T14:56:04.000Z"} //Printin UTC Time

要进行检查，正确的方法是单击在新窗口中打开，然后它将显示正确的DateTime，如下所示。

Here is live window

Answer 2

您处于本地时区，而日期选择器以UTC形式返回日期。您可以通过减少UTC日期的时区偏移量来更正它。

由于时区偏移量以分钟为单位，但是Date对象自1970年以来以毫秒为单位计算，因此您需要将偏移量乘以1000 * 60。

const utcDate = '2019-05-01T00:00:00Z';
const localDate = new Date(new Date(utcDate) - new Date().getTimezoneOffset() * 1000 * 60);

Answer 3

大多数UI日历将输入的日期存储为UTC（世界标准时间）日期或时间戳。但是显示给用户的日期会与您当地的时区转换，这可能与UTC不同。

console.log(_Date_)显示UTC时间，如果您想在当地时区看到这个时间，可以使用getHours()之类的ate方法。

因此，如果您打印this.myForm.value.birthDate.getHours()，则会看到正确的当地时间。但是您不应该将存储的时间转换为本地时间

Answer 4

这是由于时区偏移造成的。 从表格中获得的是格林尼治标准时间中的日期，因此，当您尝试在控制台上打印日期时，您将把时间调整为本地时区。因此，在打印日期时，必须将日期时间调整为本地时区。

尝试一下：

 save() {
    let localDate = new Date( this.myForm.value.birthDate.getTime() + Math.abs(this.myForm.value.birthDate.getTimezoneOffset()*60000) ) 
    console.log(this.myForm.value);
    console.log(localDate);
  }

Answer 5

我找到了解决方案。 Primeng日历具有属性dataType。默认情况下，数据类型为date。如果您将string设置为date而不是{{1}}，则它可以正常工作并将正确的日期发送到服务器。

StackBlitz

您可以从该stackblitz链接的工作示例中看到。