如何在材料日期选择器中显示UTC时间答案

【问题标题】：How to display utc time in material datepicker如何在材料日期选择器中显示UTC时间
【发布时间】：2019-03-29 18:57:05
【问题描述】：

我尝试使用 UTC 时间在 mat-datepicker (angular-material) 中显示日期：

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

但它不会起作用。

我该怎么做？

【问题讨论】：

弗拉德米尔，欢迎来到 stackoverflow。请更具体地回答您的问题。您在上面发布的代码如何在您的项目中使用，您使用 mat-datepicker 的组件的 html 和 ts 代码是什么。当您说“它不起作用”时，您的意思是什么？预期的行为是什么，正在发生什么？您看到任何错误吗？

标签： angular angular-material

【解决方案1】：

您好，我也遇到了这个问题，并且在其他地方找到了答案，所以在这里添加似乎是个好主意。

import { 
    MAT_MOMENT_DATE_FORMATS, MomentDateAdapter,
    MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter'; 
import {
    DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE  } from '@angular/material/core'; 
import * as moment from 'moment';

providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'}, // optional but gets my dates in dd/mm/yy format
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}},
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},   
],

然后不要使用 : Date 类型，使用 : moment.Moment 类型。

这应该可以清除它，但您也可以使用 moment.utc() 来真正加倍努力。

【讨论】：