角度材料日期选择器格式语言环境答案

【问题标题】：Angular material date picker format locale角度材料日期选择器格式语言环境
【发布时间】：2019-12-04 16:45:57
【问题描述】：

我创建了一个与formly 一起使用的角度材料日期选择器组件，并尝试将其设置为使用GB 作为语言环境，以便日期显示为26/07/2019。但是，在输入日期时，它仍会解析为 US，从而导致显示无效日期错误。

我尝试包含moment 和MomentDateAdapter 模块，但未能解决问题。

我已经这样设置了我的提供程序：

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]));
}

【问题讨论】：

标签： javascript angular angular-material momentjs angular-formly

【解决方案1】：

Sam，“关键”使用两个提供程序，“MAT_DATE_FORMAT”和 DateAdapter 来解析/格式化值

providers: [
    {provide: DateAdapter, useClass: CustomDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

如果你使用作为 DateAdapter MomentDateAdapter 的提供，也注入 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

【讨论】：

【解决方案2】：

将 LOCALE_ID 更改为 MAT_DATE_LOCALE

【讨论】：