角材料日期选择器中的日期不正确 [英] day incorrect in angular material datepicker

问题描述

当我选择一个日期时，我会在字段中看到正确的日期，但是当我保存时，日期选择器会发送我选择的日期之前的日期(偏移3小时) 我正在使用角度反应形式和MatMomentDateModule作为日期选择器.

When I select a date I see the correct date in the field but, when I save, the datepicker send the day before the date I have selected ( 3 hours offset ) i am using angular reactive form and MatMomentDateModule for date picker .

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

the problem is related to timezones but i just want to save the same date that the user enter to database .

代码在此处复制: https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk?file=app%2Fapp.module.ts

与githup相关的问题:

issue related to this on githup :

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

我们非常感谢您的帮助，我认为许多开发人员都需要为此提供解决方案.

Any help is appreciated , and i think a lot of developers need a solution for this .

推荐答案

两天前，在 https希尔思(Silthus)在://github.com/angular/material2/issues/7167 上发布了他的替代方法，该替代方法覆盖了MomentJsD​​ataAdapter.我尝试过，它在全球任何地方都具有魅力.

Two days ago, at https://github.com/angular/material2/issues/7167, Silthus posted his workaround that overrides the MomentJsDataAdapter. I tried it and it worked as a charm from anywhere in the globe.

首先，他添加了一个MomentUtcDateAdapter来扩展MomentDateAdapter

First he added a MomentUtcDateAdapter that extends 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组件中，必须执行以下操作:

And then in the AppModule component, you have to do this:

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

这篇关于角材料日期选择器中的日期不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！