AngularMaterialdatepicker设置⽇期格式和语⾔
Angular Material的⽇期选择器datepicker，默认都是英⽂的，⽇期格式也不太常规，需要进⾏格式化。
⽹上查到了⼀些⽅法，步骤整理如下：
1. 安装moment.js相关的⽀持
npm install @angular/material-moment-adapter
npm install moment
2. 引⽤⽀持 MatMomentDateModule
import { MatMomentDateModule } from '@angular/material-moment-adapter';
imports: [
...
MatMomentDateModule
]
3. 设置全局⽇期格式angular安装
定义⼀个全局的⽇期格式。出于代码管理的考虑，我把它放在global.ts中，⽽不是放在dule.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',
},
};
}
import {Global} from '../global';
@NgModule({...
providers: [
{ provide: MAT_DATE_FORMATS, useValue: Global.DATE_FORMAT }
]
...
4. 设置界⾯语⾔为中⽂
import { MAT_DATE_LOCALE } from '@angular/material/core'; ...
providers: [
...
{ provide: MAT_DATE_LOCALE, useValue: 'zh-CN' }
]
效果：
参考：