Angular matDatepicker locale 在输入框中输入失败

Question

如果我像

那样使用日期选择器

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

并像

一样设置语言环境

  providers: [    
    { provide: LOCALE_ID, useValue: 'it-IT' },
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' }]

如果用户 select 来自选择器的日期，它会起作用，但如果他在输入框中键入日期，则不会以正确的方式解析日期。例如：意大利语格式是 dd/mm/yyyy 如果用户 select 2018 年 3 月 31 日在框中我们得到“31/03/2018”（没问题）但如果他键入“31/03/2018”日期无效（但它是有效的意大利日期）。如果他输入“03/05/2018”，我们得到的是 3 月 5 日，而不是 5 月 3 日。是 angular material 错误还是我犯了一些错误？

我也试过 'it' 代替 'it-IT'。

Answer 1

根据 angular material 示例，您可以使用此

import {Component} from '@angular/core';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

/** @title Datepicker with different locale */
@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrls: ['datepicker-locale-example.css'],
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},

    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})

确保 npm install --save package @angular/material-moment-adapter 或 yarn add package @angular/material-moment-adapter

Angular matDatepicker locale 在输入框中输入失败

Angular matDatepicker locale fail typing in input box

locale

angular-material

angular

angular-material-datetimepicker