Angular Material datepicker设置日期格式和语言

Angular Material的日期选择器datepicker，默认都是英文的，日期格式也不太常规，需要进行格式化。

网上查到了一些方法，步骤整理如下：

1. 安装moment.js相关的支持

npm install @angular/material-moment-adapter
npm install moment

2. 引用支持 MatMomentDateModule

app.module.ts

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

imports: [
   ...
   MatMomentDateModule
]

3. 设置全局日期格式

定义一个全局的日期格式。出于代码管理的考虑，我把它放在global.ts中，而不是放在app.module.ts中，虽然两者效果是一样的。

global.ts

export class Global {
    ...
    public static DATE_FORMAT = {
        parse: {
            dateInput: 'YYYY-MM-DD',
        },
        display: {
            dateInput: 'YYYY-MM-DD',
            monthYearLabel: 'YYYY MMM',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'YYYY MMMM',
        },
     };
}

app.module.ts

import {Global} from '../global';

@NgModule({...
providers: [
    { provide: MAT_DATE_FORMATS, useValue: Global.DATE_FORMAT }
]
...

4. 设置界面语言为中文

app.module.ts

import { MAT_DATE_LOCALE } from '@angular/material/core';
...
providers: [
   ...
   { provide: MAT_DATE_LOCALE, useValue: 'zh-CN' }
]

效果：

 

参考：

http://brickydev.com/angular-material-datepicker-with-many-custom-date-formats/

https://stackoverflow.com/questions/45726463/change-language-of-datepicker-of-material-angular-4