Angular 角度6中mat日期选择器的UTC日期

我在Angular 6项目中使用了

mat datepicker

。但中的日期选择器正在显示当前时区日期。与此相反，我需要显示当前UTC日期

这是我的密码

.ts文件

.html文件

---

您可以将Moment.js与Material Datepicker一起使用，并相应地设置如下选项：

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

---

我已经在上创建了一个示例。您可以在上找到更多信息。

我创建了自己的日期适配器，因为上面的示例不适用于我。这也将日期格式化为长格式

import { NativeDateAdapter } from '@angular/material';

export class AppDateAdapter extends NativeDateAdapter {

  format(date: Date, displayFormat: Object): string {
    return this.formateDate(date);
  }

  deserialize(value: any): Date | null {

    if ((typeof value === 'string') && (value.indexOf('-') > -1)) {
      const str = value.split('-');
      const dayArray = str[2].split('T');
      const year = Number(str[0]);
      const month = Number(str[1]) - 1;
      const day = Number(dayArray[0]);
      return new Date(Date.UTC(year, month, day));
    }

    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  createDate(year: number, month: number, date: number): Date {
    return new Date(Date.UTC(year, month, date));
  }

  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('-') > -1)) {
      const str = value.split('-');
      const dayArray = str[2].split('T');

      const year = Number(str[0]);
      const month = Number(str[1]) - 1;
      const day = Number(dayArray[0]);

      return new Date(year, month, day);
    }

    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  formateDate(date: Date) {
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    return date.getDate() + '' + this.nth(date.getDate()) + ' ' + months[date.getMonth()] + ' ' + date.getFullYear();
  }

  nth(d: number) {
    if (d > 3 && d < 21) return 'th';
    switch (d % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }
}

从'@angular/material'导入{NativeDateAdapter}；
导出类AppDateAdapter扩展了NativeDateAdapter{
格式（日期：日期，显示格式：对象）：字符串{
返回此.formattedate（日期）；
}
反序列化（值：任意）：日期|空{
if（（typeof value==='string'）&&（value.indexOf（'-'）>-1））{
const str=value.split（'-'）；
const dayArray=str[2]。拆分（'T'）；
const year=编号（str[0]）；
const month=Number（str[1]）-1；
const day=Number（dayArray[0]）；
返回新日期（日期UTC（年、月、日））；
}
constamp timestamp=typeof value=='number'？值：Date.parse（值）；
返回isNaN（时间戳）？空：新日期（时间戳）；
}
createDate（年：编号，月：编号，日期：编号）：日期{
返回新日期（Date.UTC（年、月、日））；
}
解析（值：任意）：日期|空{
if（（typeof value==='string'）&&（value.indexOf（'-'）>-1））{
const str=value.split（'-'）；
const dayArray=str[2]。拆分（'T'）；
const year=编号（str[0]）；
const month=Number（str[1]）-1；
const day=Number（dayArray[0]）；
返回新日期（年、月、日）；
}
constamp timestamp=typeof value=='number'？值：Date.parse（值）；
返回isNaN（时间戳）？空：新日期（时间戳）；
}
格式化日期（日期：日期）{
常量月=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
返回日期.getDate（）+''+此.nth（date.getDate（））+''+月[date.getMonth（）]+''+日期.getFullYear（）；
}
第n（d：编号）{
如果（d>3&&d<21）返回“th”；
开关（d%10）{
案例1：返回“st”；
案例2：返回“nd”；
案例3：返回“rd”；
默认值：返回“th”；
}
}
}

提供此选项以使用UTC

{provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },

为本地支持（例如FR）提供此项

使其工作的最重要的事情是使DateAdapter取决于您定义的设置

{
  provide: DateAdapter,
  useClass: MomentDateAdapter,
  deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},

AppModule的完整示例

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
    ],
    providers: [
         {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         {provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},
         {
             provide: DateAdapter,
             useClass: MomentDateAdapter,
             deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
         },
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

---

js将在最终版本中包含所有区域设置，请为该问题提供替代解决方案@在这种情况下，您可以创建自己的日期适配器。看下面的答案。

{provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},

{
  provide: DateAdapter,
  useClass: MomentDateAdapter,
  deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
    ],
    providers: [
         {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         {provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},
         {
             provide: DateAdapter,
             useClass: MomentDateAdapter,
             deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
         },
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}