当我 Select 一个日期时,我会在字段中看到正确的日期,但当我保存时,日期 Select 器会在我 Select 的日期前一天发送(3小时偏移)

这个问题与时区有关,但我只想保存用户输入数据库的相同日期.

这里的代码是:https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk?file=app%2Fapp.module.ts

issue on stackblitz

githup上与此相关的问题:

https://github.com/angular/material2/issues/7167

非常感谢您的帮助,我认为很多开发人员都需要一个解决方案.

推荐答案

两天前,在https://github.com/angular/material2/issues/7167岁的时候,西尔萨斯发布了他的解决办法,覆盖了MomentJsDataAdapter.我试过了,它在全球任何地方都起到了护身符的作用.

首先,他添加了一个MomentDateAdapter,扩展了MomentDateAdapter

import { Inject, Injectable, Optional } from '@angular/core';
import { MAT_DATE_LOCALE } from '@angular/material';   
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';
import * as moment from 'moment';

@Injectable()
export class MomentUtcDateAdapter extends MomentDateAdapter {

  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
  }

  createDate(year: number, month: number, date: number): Moment {
    // Moment.js will create an invalid date if any of the components are out of bounds, but we
    // explicitly check each case so we can throw more descriptive errors.
    if (month < 0 || month > 11) {
      throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`);
    }

    if (date < 1) {
      throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
    }

    let result = moment.utc({ year, month, date }).locale(this.locale);

    // If the result isn't valid, the date must have been out of bounds for this month.
    if (!result.isValid()) {
      throw Error(`Invalid date "${date}" for month with index "${month}".`);
    }

    return result;
  }
}

然后在AppModule组件中,您必须这样做:

providers: [
    ...
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    { provide: DateAdapter, useClass: MomentUtcDateAdapter },
    ...
],

Angular相关问答推荐

ANGLING:ExpressionChangedAfterChecked在嵌套形式中由子项添加验证器

完成行为主体

VSCode 调试器空白页面并在使用 VS Code 1.76.1 和 Chrome 111 启动时加载

需要做什么才能使 ErrorHandler 正常工作?

等待两个订阅完成而不嵌套

CORS 策略和 .NET Core 3.1 的问题

Angular2 SVG xlink:href

如何在angular 5 中获取基本网址?

如何使用 Bootstrap 4 flexbox 填充可用内容?

Angular2 + Jspm.io:使用类decorator 时需要反射元数据垫片

实现自定义 NgbDateParserFormatter 来更改 NgbInputDatepicker 上输入值的格式是否正确?

使用 Angular 2 新路由更改页面标题

Angular 2+ ngModule 中导入/导出的作用

为什么用?模板绑定中的运算符?

Angular 2:组件交互,可选输入参数

CustomPipe 没有提供者

动态添加/删除验证器

如何作为模块的子模块路由到模块 - Angular 2 RC 5

如何在 Angular Material 中设置图标的 colored颜色 ?

如何使用formControlName和处理嵌套的formGroup?