如何在 ngx-mat-datetime-picker 中自定义日期和时间格式？答案

【问题标题】：How can I customize date and time format in ngx-mat-datetime-picker?如何在 ngx-mat-datetime-picker 中自定义日期和时间格式？
【发布时间】：2020-07-07 04:08:18
【问题描述】：

我正在开发 Angular7 及其兼容的 ngx-mat-datetime-picker。它按预期工作。

想要自定义格式：

实际： mm/dd/yyyy, hh:mm:ss 预期： yyyy-mm-dd hh:mm:ss

目前我没有找到任何格式化选项。

我在模板value="{{ mydate | date: 'yyyy-mm-dd hh:mm:ss' }}中尝试过这样的事情

但不工作。

【问题讨论】：

标签： angular angular-material angular8 angular-material2 date-pipe

【解决方案1】：

您需要创建自定义适配器并指定自定义格式

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: 'l, LTS'
  },
  display: {
    dateInput: 'YYYY-MM-DD HH:mm:ss',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }
};

@NgModule({
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: CustomNgxDatetimeAdapter,
      deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ],
})
export class CustomNgxDateTimeModule { }

请从以下要点中找到 CustomNgxDatetimeAdapter.ts

https://gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39

已经测试过了。它正在工作！

【讨论】：

如果您需要 CustomNgxDatetimeAdapter 类，请告诉我。我将使用 CustomNgxDatetimeAdapter 代码更新答案。
请添加 CustomNgxDatetimeAdapter 类
已编辑答案请找到要点
gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39 - 不管怎样，我把它贴在这里。

【解决方案2】：

您可以在这里找到更多示例https://github.com/h2qutc/angular-material-components/issues/27

【讨论】：

是否可以自定义 ngx-mat-datetime-picker 以用作日期时间范围组件（从...到）？

【解决方案3】：

创建一个常量：（插入您喜欢的格式）

export const DATE_TIME_FORMAT = {
  parse: {
    dateInput: 'l, LT',
  },
  display: {
    dateInput: 'l, LT',
    monthYearLabel: 'MM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }

提供：

{provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT}

结果（我的格式删除了秒数）：

9/4/2020, 1:11 PM

【讨论】：