我正在研究一个Angular应用程序与Material设计,我正在使用Moment.js解析和格式化日期。
在我的其中一个页面中,我有一个材料的日期选择器。我遵循了材料的指南来使日期选择器与moment
对象 - 而不是在本机上Date
object.
我还设法以某种格式在日期选择器中显示日期。但这种格式硬编码在组件的提供者中。
如何根据用户偏好在运行时更改格式?
这是我到目前为止所得到的:
我已经安装了 npm 的软件包:
$ npm i moment -S
$ npm i @angular/material-moment-adapter -S
// app.module.ts
import { MatMomentDateModule } from '@angular/material-moment-adapter'
...
@NgModule({
imports: [
MatMomentDateModule,
...
// demo.component.ts
import * as moment from 'moment';
import { MAT_DATE_FORMATS } from '@angular/material/core';
const MY_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'LL',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.scss'],
providers: [
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})
export class DemoComponent {
public dateVal = moment();
}
// demo.component.html
<mat-form-field>
<input matInput [matDatepicker]="myDatePicker" [(ngModel)]="dateVal">
<mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle>
<mat-datepicker #myDatePicker></mat-datepicker>
</mat-form-field>
正如您所看到的,日期格式是在组件的提供程序中定义的。我如何在运行时更改它?
可以在这里找到一个工作示例:
https://stackblitz.com/angular/mgaargebgpd?file=app%2Fdatepicker-formats-example.ts