Angular Material DatePicker DD.MM.YYYY

Question

有人成功使用格式为“DD.MM.YYYY”和momentjs的日期选择器吗？我认为文档和starblitz 可能会被破坏。

这是我的 MaterialModule(在我的 AppModule 中导入)，但我所有的日期选择器都有格式 LL(24.6.2018)而不是 DD.MM.YYYY(24.06.2018)。

import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDatepickerModule} from '@angular/material';
import {MomentDateModule, MomentDateAdapter} from '@angular/material-moment-adapter';

export const MY_FORMATS = {
    parse: {
        dateInput: 'DD.MM.YYYY',
    },
    display: {
        dateInput: 'DD.MM.YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD.MM.YYYY',
        monthYearA11yLabel: 'MM YYYY',
    },
};

@NgModule({
    imports: [..., MatDatepickerModule, MomentDateModule, ...],
    exports: [..., MatDatepickerModule, MomentDateModule, ...],
    providers: [
        {provide: MAT_DATE_LOCALE, useValue: 'de'},
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
    ],
})

Answer 1

我们可以使用两种方法来使用 MomentJs 自定义日期格式，如 docs 中所述。 :

导入MatMomentDateModule在应用程序的根模块中，然后提供 MAT_DATE_FORMATS在主模块或组件级别:

import {MatMomentDateModule} from '@angular/material-moment-adapter';

// ..

const MY_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MM YYYY',
    dateA11yLabel: 'DD.MM.YYYY',
    monthYearA11yLabel: 'MM YYYY',
  },
};

// ..

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule
  ],
  provide: [
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ]
})

示例 :
https://stackblitz.com/edit/angular-uzicfk

如果导入 MatMomentDateModule不可能，我们可以使用MomentDateAdapter对于 DateAdapter提供者，连同 MAT_DATE_FORMATS :

import {MomentDateAdapter} from '@angular/material-moment-adapter';

// ..

@NgModule({
  provide: [
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
     { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }
  ]
})

示例 : https://stackblitz.com/edit/angular-uzicfk-8y2lwr
示例基于 Angular Material v9