0

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

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

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 并且时间丢失，虽然日历从星期一开始，这很好，但格式不是。在我使用自定义日历格式后，我无法弄清楚为什么日期时间格式不起作用。有任何想法吗？

4

1 回答 1

0

对我有用的解决方案是：

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},
],

请参阅：DateTimePicker 示例

于 2021-06-30T11:23:15.577 回答