Angular Material日期选择器 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},
    ],
})

- f-aubert

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,
    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构建的。

- andreivictor