Angular材质DatePicker DD.MM.YYYY。

Question

有人成功地用格式为'DD.MM.YYYY'和momentjs的datepicker吗？我觉得文档和starblitz可能都是坏的。

在这里，我的MaterialModule（它被导入到我的AppModule中），但我所有的datepicker都有格式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自定义日期格式，如以下所述 文件:

• 进口 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
  ],
  provide: [
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ]
})

例子: https:/stackblitz.comeditangular-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.comeditangular-uzicfk-8y2lwr。

例子是建立在Angular Material v9的基础上