我创建了一个 Angular Material 日期选择器组件以与 formly
一起使用,并尝试将其设置为使用 GB 作为语言环境,以便日期显示为 26/07/2019
.但是,在输入日期时,它仍会解析为 US,从而导致显示无效日期错误。
我试图包含moment
和 MomentDateAdapter
模块,但一直无法解决问题。
这是 stackblitz
我已经像这样设置了我的提供者:
providers: [
{ provide: LOCALE_ID, useValue: 'en-GB' },
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
]
我的组件看起来像这样:
import { Component, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FieldType } from '@ngx-formly/material';
import { MatInput } from '@angular/material';
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment} from 'moment';
const moment = _rollupMoment || _moment;
@Component({
selector: 'app-form-datepicker-type',
template: `
<input matInput
[errorStateMatcher]="errorStateMatcher"
[formControl]="formControl"
[matDatepicker]="picker"
[matDatepickerFilter]="to.datepickerOptions.filter"
[formlyAttributes]="field">
<ng-template #matSuffix>
<mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
</ng-template>
<mat-datepicker #picker></mat-datepicker>
`,
})
export class DatepickerTypeComponent extends FieldType {
// Datepicker takes `Moment` objects instead of `Date` objects.
date = new FormControl(moment([2017, 0, 1]));
}
最佳答案
Sam,“键”使用两个提供程序,“MAT_DATE_FORMAT”和 DateAdapter 来解析/格式化值
providers: [
{provide: DateAdapter, useClass: CustomDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
如果您使用作为 DateAdapter MomentDateAdapter 的提供,也注入(inject) MAT_DATE_LOCALE
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}
见 official docs
但是你也可以使用 CustomDateAdapter,这是一个有两个功能的类,格式和解析
export class CustomDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
let result=date.toDateString();
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
switch (displayFormat)
{
case 'DD/MM/YYYY':
// Return the format as per your requirement
result= `${day}-${month}-${year}`;
break;
default:
case 'MMM YYYY':
// Return the format as per your requirement
result= `${month}-${year}`;
break;
}
return result;
}
parse(value:string):any
{
let parts=value.split('/');
if (parts.length==3)
return new Date(+parts[2],(+parts[1])-1,+parts[0])
}
}
见 example in stackblitz
关于javascript - Angular Material 日期选择器格式语言环境,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57218343/