[英]Angular material date picker format locale
I have created an angular material date picker component to use with formly
, and tried to set it to use GB for the locale so that dates are shown as 26/07/2019
. 我创建了一个有角材质的日期选择器组件以与
formly
一起使用,并尝试将其设置为在区域设置中使用GB,以便日期显示为26/07/2019
。 However, when typing in the date, it parses as US still, resulting in invalid date errors being shown. 但是,输入日期时,它仍解析为美国,从而导致显示无效的日期错误。
I have tried to include moment
and the MomentDateAdapter
module but have been unable to solve the issue. 我试图包括
moment
和MomentDateAdapter
模块,但无法解决该问题。
Here is a stackblitz 这是一次突击
I've set my providers like so: 我将提供者设置为:
providers: [
{ provide: LOCALE_ID, useValue: 'en-GB' },
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
]
and my component looks like this: 我的组件看起来像这样:
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, the "key" are use two providers, "MAT_DATE_FORMAT" and DateAdapter to parse/format the values Sam,“键”使用两个提供程序“ MAT_DATE_FORMAT”和DateAdapter来解析/格式化值
providers: [
{provide: DateAdapter, useClass: CustomDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
If you use as provide of DateAdapter MomentDateAdapter, inject too MAT_DATE_LOCALE 如果用作DateAdapter MomentDateAdapter的提供,则也要注入MAT_DATE_LOCALE
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}
see official docs 查看官方文件
But you can also use a CustomDateAdapter, that is a class with two functions, format and parse 但是您也可以使用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])
}
}
将LOCALE_ID更改为MAT_DATE_LOCALE
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.