Angular Material DateTimePicker 在输入中显示错误的格式答案

【问题标题】：Angular Material DateTimePicker shows wrong format in inputAngular Material DateTimePicker 在输入中显示错误的格式
【发布时间】：2021-04-21 12:13:17
【问题描述】：

我想为我的输入字段自定义它，我可以单独做，但是当我把它们放在一起时它不起作用。

我想要格式化的第一件事是将日历设置为从星期日到星期一一周的第一天，我设法使用自定义适配器来做到这一点：

export class CustomDateAdapter extends NgxMatNativeDateAdapter {
    getFirstDayOfWeek(): number {
        return 1;
    }
}

第二个是把日期时间格式化成这样：2021-04-21 8:00，和这段代码配合得很好：

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

问题是，如果我将它们一起使用，日期时间格式会切换回 2021/04/21 并且缺少时间，虽然日历从星期一开始，这很好，但格式不是。在我使用自定义日历格式后，我无法弄清楚为什么日期时间格式不起作用。有什么想法吗？

【问题讨论】：

标签： angular-material angular-material-datetimepicker

【解决方案1】：

对我有用的解决方案是：

1/定义一个CustomDateAdapter并实现方法：getFirstDayOfWeek和format

// 文件名'custom-date-adapter.ts'

import { NgxMatNativeDateAdapter } from '@angular-material-components/datetime-picker';
import * as moment from 'moment';

export class CustomDateAdapter extends NgxMatNativeDateAdapter {
  getFirstDayOfWeek(): number {
    // Monday is the first day of the week
    return 1;
  }

  // Format the date, according to CUSTOM_DATE_FORMATS
  format(date: Date, displayFormat: Object): string {
    return moment(date).format(displayFormat.toString());       
  }  
}

2/ 然后，在您的模块中，使用：

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

providers: [
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
{ provide: NgxMatDateAdapter, useClass: CustomDateAdapter},
],

【讨论】：