角材料日期选择器:日期解析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):Tue，11 Jun 2019 19:00:00 GMT
• 等于(通过LocaleString):6/12/2019，12:00:00 AM
• 等于(通过LocaleTimeString):12:00:00 AM

• (by default): 2019-06-11T19:00:00.000Z
• is equal to (by UTCString): Tue, 11 Jun 2019 19:00:00 GMT
• is equal to (by LocaleString): 6/12/2019, 12:00:00 AM
• is equal to (by LocaleTimeString): 12:00:00 AM

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

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

此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屋！