Angular 材料日期选择器：日期解析 UTC 问题 1 天前

Question

我知道有几个关于此问题的线程，我全部阅读了它们，但好几天都无法解决此问题。我可能找到了一个解决方案，但它似乎对我来说很脏。

\n\n

因此，与其他用户一样，我对 datePicker 也有同样的问题。对我来说，它是 Angular Material Datepickermat-datepicker

\n\n

当我记录该值时，我得到正确的结果：

\n\n

Wed Dec 24 1999 00:00:00 GMT+0100 (Mitteleurop\xc3\xa4ische Normalzeit)\n

\n\n

但在请求中是

\n\n

1999-12-23T23:00:00.000Z\n

\n\n

我还尝试过什么：

\n\n

我已添加{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }到我的component和 到我的app.module.ts. 这对我来说没有任何区别。

\n\n

我的肮脏解决方案（在发送请求之前）：

\n\n

Wed Dec 24 1999 00:00:00 GMT+0100 (Mitteleurop\xc3\xa4ische Normalzeit)\n

\n\n

当我这样做时，控制台会记录：

\n\n

Wed Dec 24 1999 01:00:00 GMT+0100 (Mitteleurop\xc3\xa4ische Normalzeit)\n

\n\n

并且请求是正确的：

\n\n

1997-12-24T00:00:00.000Z\n

\n\n

但如果现在有人来自不同的时区，比如 GMT-0100，这将再次不起作用。如何正确解决这个问题？

\n\n

如果有必要知道的话，我还会动态更改适配器：

\n\n

1999-12-23T23:00:00.000Z\n

\n

Answer 1

选取和显示的值是相同的...日期时间的不同格式向我们显示了不同的结果（其中日期也发生了变化）！

例如：

• （默认）：2019-06-11T19:00:00.000Z
• 等于（按 UTCString）：2019 年 6 月 11 日星期二 19:00:00 GMT
• 等于（通过 LocaleString）：6/12/2019, 12:00:00 AM
• 等于（按 LocaleTimeString）：12:00:00 AM

我们不需要转换它，因为日期对象包含相同的精确时间。

这次堆栈闪电战将进一步展示格式在表面上可以产生的差异，但日期在下面是相同的；如果您有问题/意见，您可以分叉此 stackblitz，进行更改并针对此答案发表评论，我会尽力澄清。

相关TS：

import {Component} from '@angular/core';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {
  planModel: any = {start_time: new Date() };
  constructor(){}

  dateChanged(evt){
    let selectedDate = new Date(evt);
    console.log("by default:", selectedDate);
    console.log("by UTCString:", selectedDate.toUTCString());
    console.log("by LocaleString:", selectedDate.toLocaleString());
    console.log("by LocaleTimeString:", selectedDate.toLocaleTimeString());
  }

}

相关HTML：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date"
  [(ngModel)]="planModel.start_time"
  (ngModelChange)='dateChanged($event)'
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<hr/>

<p>By default: {{planModel.start_time}} </p>
<p>Medium date: {{planModel.start_time | date:'medium'}} </p>
<p>Short date: {{planModel.start_time | date:'short'}} </p>
<p>Short time: {{planModel.start_time | date: 'shortTime' }} </p>
<p>Medium time: {{planModel.start_time | date: 'mediumTime' }} </p>
<p>Long time: {{planModel.start_time | date: 'longTime' }} </p>
<p>Full time: {{planModel.start_time | date: 'fullTime' }} </p>