角度材料日期选择器格式区域设置 [英] Angular material date picker format locale
问题描述
我创建了一个有角度的材料日期选择器组件以与 formly
一起使用,并尝试将其设置为使用 GB 作为语言环境,以便日期显示为 26/07/2019代码>.但是,在输入日期时,它仍然解析为 US,导致显示无效的日期错误.
我尝试包含 moment
和 MomentDateAdapter
模块,但一直无法解决问题.
这是一个stackblitz
我已经这样设置了我的提供者:
提供者:[{ 提供:LOCALE_ID,useValue:'en-GB' },{ 提供:DateAdapter,useClass:MomentDateAdapter,deps:[MAT_DATE_LOCALE] },{ 提供:MAT_DATE_FORMATS,使用值:MAT_MOMENT_DATE_FORMATS },]
我的组件如下所示:
import { Component, ViewChild } from '@angular/core';从'@angular/forms'导入{FormControl};从'@ngx-formly/material'导入{FieldType};从'@angular/material' 导入 { MatInput };import * as _moment from 'moment';//tslint:disable-next-line:no-duplicate-imports从时刻"导入 {default as _rollupMoment};const 时刻 = _rollupMoment ||_片刻;@成分({选择器:'app-form-datepicker-type',模板:`<输入垫输入[errorStateMatcher]="errorStateMatcher"[formControl]="formControl"[matDatepicker]="picker"[matDatepickerFilter]="to.datepickerOptions.filter"[formlyAttributes]="字段"><ng-template #matSuffix><mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle></ng-模板><mat-datepicker #picker></mat-datepicker>`,})导出类 DatepickerTypeComponent 扩展 FieldType {//Datepicker 接受 `Moment` 对象而不是 `Date` 对象.date = new FormControl(moment([2017, 0, 1]));}
Sam,"key" 使用两个提供程序,"MAT_DATE_FORMAT" 和 DateAdapter 来解析/格式化值
提供者:[{提供:DateAdapter,useClass:CustomDateAdapter},{提供:MAT_DATE_FORMATS,useValue:MY_FORMATS},],
如果你使用 DateAdapter MomentDateAdapter 的提供,也注入 MAT_DATE_LOCALE
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}
参见官方文档
但是你也可以使用CustomDateAdapter,它是一个有两个功能的类,格式和解析
export class CustomDateAdapter extends NativeDateAdapter {格式(日期:日期,显示格式:对象):字符串{让结果=date.toDateString();const day = date.getDate();const 月份 = date.getMonth() + 1;const year = date.getFullYear();开关(显示格式){案例'DD/MM/YYYY'://根据您的要求返回格式结果= `${day}-${month}-${year}`;休息;默认:案例'MMM YYYY'://根据您的要求返回格式结果= `${month}-${year}`;休息;}返回结果;}解析(值:字符串):任何{让parts=value.split('/');如果(部分.长度== 3)返回新日期(+parts[2],(+parts[1])-1,+parts[0])}}
参见 stackblitz 中的示例>
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
. 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.
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
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
{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
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])
}
}
这篇关于角度材料日期选择器格式区域设置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!