如何在Angular Material Date Picker中包含前导零？

Posted 2023-02-26

使用角度材料5。

我希望日期选择器显示01/01/2000而不是1/1/2000。我阅读了文档，但是我没有看到任何相关内容。

有没有简单的方法来实现这个？或者我最终还是要以某种方式创建自己的格式？

答案

您可以提供MatDateFormats的自定义实现。

将"@angular/material-moment-adapter"添加到您的npm依赖项中。

将以下信息添加到根模块或随后引用的单独材料模块。

import  NgModule  from '@angular/core';
import 
    MatDatepickerModule,
    MAT_DATE_LOCALE,
    MAT_DATE_FORMATS,
    DateAdapter,
    MatDateFormats
     from '@angular/material';
import 
    MomentDateAdapter
 from '@angular/material-moment-adapter';

export const MY_FORMATS: MatDateFormats = 
    parse: 
        dateInput: 'MM-DD-YYYY',
    ,
    display: 
        dateInput: 'MM-DD-YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    ,
;

@NgModule(
    imports: [
        MatDatepickerModule,
    ],
    exports: [
        MatDatepickerModule,
    ],
    providers: [
         provide: MAT_DATE_LOCALE, useValue: 'en-US' ,
         provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] ,
         provide: MAT_DATE_FORMATS, useValue: MY_FORMATS 
    ]
)
export class YourModule