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' }
]
效果:
参考:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。