角度材料日期选择器:日期解析 UTC 问题 1 天前 [英] Angular material date picker: Date Parsing UTC problem 1 day before

问题描述

我知道有几个关于此的主题，我阅读了所有主题，但好几天都无法解决此问题.我可能找到了解决方案，但对我来说似乎很脏.

I know there are several threads about this and i read them all but couldn't fix this for days. I might found a solution but it seems to be do dirty for me.

作为其他用户，我对 datePicker 也有同样的问题.对我来说，它是 Angular Material Datepicker mat-datepicker

So as other users I have the same problem with the datePicker. For me it's the Angular Material Datepicker mat-datepicker

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

When I log the value I get the correct result:

Wed Dec 24 1999 00:00:00 GMT+0100 (Mitteleuropäische Normalzeit)

但在请求中是

1999-12-23T23:00:00.000Z

我尝试过的:

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

I've added { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } } to my component and to my app.module.ts. That does not make any difference for me.

我的肮脏解决方案(在发送请求之前):

My dirty solution (before sending the request):

 let newDate= new Date(this.personalForm.get("dateOfBirth").value);
 newDate.setMinutes(newDate.getMinutes() - newDate.getTimezoneOffset());

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

When I am doing this the console logs:

Wed Dec 24 1999 01:00:00 GMT+0100 (Mitteleuropäische Normalzeit)

并且请求是正确的:

1997-12-24T00:00:00.000Z

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

But if somebody now would be from a different timezone like GMT-0100 this would again not work. How to fix this correctly?

如果有必要，我还会动态更改适配器:

I also change the adapter dynamically if it's necessary to know:

 this._adapter.setLocale(this.translateService.currentLang);

推荐答案

选择和显示的值是相同的...它是日期时间的不同格式向我们显示不同的结果(日期也有变化)！！

The value which is picked and displayed is the same... it is the different formats of the date-time which show us a different result (where the date also changes)!!

例如:

• (默认):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

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

We don't need to convert it, because the date object contains the same exact time.

此 stackblitz 将进一步显示格式在表面上的差异，但日期下面是一样的；如果您有任何问题/意见，可以分叉此 stackblitz，进行更改并针对此答案发表评论，我会尽力澄清.

This stackblitz will further show the difference a format can make on the surface but the date is the same underneath; If you have questions/comments, you can fork this stackblitz, make changes and post a comment against this answer, i'll try to clarify.

相关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>

这篇关于角度材料日期选择器:日期解析 UTC 问题 1 天前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！