Material Angular 6 DatePicker 正在解析我的日期前 1 天

Posted 2023-03-13

【中文标题】Material Angular 6 DatePicker 正在解析我的日期前 1 天

【英文标题】：Material Angular 6 DatePicker is parsing my date 1 day before

【发布时间】：2018-11-17 12:30:39

【问题描述】：

Material Angular DatePicker 的当前版本发生了一些非常奇怪的事情，在我将它从 A5 更新到 A6 后，它开始在 1 天前解析我的日期，示例在这里：https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date

我正在使用原始文档示例，将语言稍微更改为我自己的语言，并将自定义日期值应用到 ngModel 以便它可以解析。

但是你可以在这里查看代码：

import Component from '@angular/core';
import MAT_MOMENT_DATE_FORMATS, MomentDateAdapter from '@angular/material-moment-adapter';
import DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE from '@angular/material/core';

@Component(
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrls: ['datepicker-locale-example.css'],
  providers: [
    provide: MAT_DATE_LOCALE, useValue: 'pt', //my change from the original documentation example
    provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE],
    provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS,
  ],
)
export class DatepickerLocaleExample 
  constructor(private adapter: DateAdapter<any>) 

  private someDate = '2018-01-31'; //my change from the original documentation example

  french() 
    this.adapter.setLocale('fr');
  

HTML：

<mat-form-field>
  <input matInput [matDatepicker]="myDatePicker" placeholder="Different locale" [(ngModel)]="someDate"> <!-- my change from the original documentation example -->
  <mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatePicker></mat-datepicker>
  <mat-hint>Actual Date: someDate</mat-hint>
</mat-form-field>

<button mat-button (click)="french()">Dynamically switch to French</button>

有人知道怎么解决吗？

【问题讨论】：

您是否处于负偏移时区？

我在这里是 UTC+1 / UTC+2，我没有任何问题，所以我猜这与本地显示日期、时区有关。 i.stack.imgur.com/9FPfn.png

@Pac0 我在 -3h，我的代码有误，请更新您的屏幕并告诉我是否可以。

这是我启动应用程序时看到的内容：i.stack.imgur.com/PDwDv.png。当我单击“切换到法语”时，没有任何变化。如果我更改日期，那么我有.this（消息已更改）：i.stack.imgur.com/lIjwT.png。单击切换按钮也不会改变任何东西。但是，日期没有问题（在我这边）

也测试了 stackblitz，我这边没问题。

【参考方案1】：

所以，经过一些研究，我发现这是一个时区问题。为了临时修复它，我必须将 T00:00:00 连接到来自后端的日期末尾，格式为 yyyy/MM/dd。 p>

如果可能的话，最好的选择是到后端将格式更改为 yyyy/MM/ddTHH:mm:ss。

否则，当您必须在 Angular 6 Material DatePicker 中使用格式 yyyy/MM/dd 时，有 2 个选项可以解决问题：有好有坏。

不好的（可能只是暂时的）是做我所做的，在 DatePicker 解析它之前将 T00:00:00 连接到日期的末尾。 好处是实际获取日期字符串，将其转换为日期，将时区转换为 GMT，然后让 DatePicker 对其进行解析。

我希望我能像我一样帮助那些绝望的人。

【讨论】：

在我的情况下，我在后端使用 java.time.LocalDate 而不是 java.time.LocalDateTime。更改日期和解决问题的类型

【参考方案2】：

对于只希望他们的日期为 UTC 日期并且通过 DatePicker 使用 JS Date 对象卡住的任何人，您只需向 @NgModule 提供程序添加一个适配器选项：

@NgModule(
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
     provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue:  useUtc: true  
  ]
)

您需要将@angular/material-moment-adapter 添加到您的package.json 并导入模块/选项对象：

import MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule from '@angular/material-moment-adapter';

一旦完成，任何 DatePicker 都将提供 UTC 日期，并且考虑到没有机会使用 DatePicker 选择时间组件，这似乎是合适的。

从Material DatePicker info中提取。

【参考方案3】：

你可以做一个解析函数，像这样：

let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());

return newDate;

【讨论】：

不错的主意。