Question

有人成功使用格式为“ DD.MM.YYYY”和momentjs的日期选择器吗？我认为文档以及“星光闪闪”都可能坏了。

这里是我的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

我们可以使用两种方法自定义MomentJ的日期格式，如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

构建

角材料DatePicker DD.MM.YYYY

1 个答案: