Angular Material 日期选择器输入将日期视为美国格式答案

【问题标题】：Angular Material date picker input treat the date as US formatAngular Material 日期选择器输入将日期视为美国格式
【发布时间】：2019-01-09 15:49:58
【问题描述】：

在输入字段中填充日期（不是通过日期选择器本身）时，日期被视为美国格式。例如，在输入字段中输入 - 10/01/2019 后，它变为 01/10/2019，打开日期选择器时，日期为 2019 年 10 月 1 日。

通过日期选择器选择日期时没有问题，所选日期显示为 dd/MM/yyyy

【问题讨论】：

请通过stackblitz.com添加minimal reproducible example
在你的组件上使用 datePipe。 angular.io/api/common/DatePipe
datePipe 没有解决它。问题是来自文本输入的输入被认为是美国

标签： angular angular-material

【解决方案1】：

更新格式函数中有一个“错误” - 需要在 ('0'+(date.getMonth()+1)).slice(-2) 中加上括号-

只需创建一个 DateAdapter

import {NativeDateAdapter,DateAdapter} from '@angular/material';

export class MyDateAdapter extends NativeDateAdapter{
  parse(value: string) {
    let it=value.split('/');
    if (it.length==3)
    return new Date(+it[2],+it[1]-1,+it[0],12)
  }

  format(date: Date, displayFormat: Object) {
    return ('0'+date.getDate()).slice(-2)+'/'+
           ('0'+(date.getMonth()+1)).slice(-2)+'/'+date.getFullYear()
  }
}

然后作为提供者使用

@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
    providers: [
    {provide: DateAdapter, useClass: MyDateAdapter}
  ],

})
export class DatepickerFormatsExample {
  date = new FormControl(new Date(Date.now()));
}

见

stackblitz

【讨论】：

就我而言，我只需要删除“format()”函数，它就像一个魅力，谢谢！！ :)
Nicolas，如果您删除“format()”函数，则不会以 dd/MM/yyyy 格式显示日期。代码中有一个“错误”（刚刚更正）
也许我有一些配置使它可以在没有这个功能的情况下工作；），但是感谢您的回复！
对于更高版本的角材料，您将在@angular/material/core下找到NativeDateAdapter, DateAdapter模块。

【解决方案2】：

如果您使用的是角度材料日期选择器，您可以覆盖默认为美国的语言环境。看到这个链接：https://material.angular.io/components/datepicker/overview#internationalization

您需要将 useValue 设置为 fr-FR 或其他使用 dd/MM/yyyy 的语言环境

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},
  ],
})
export class MyApp {}

【讨论】：

将本地设置为 en-FR 时，输入中的日期未转换，但打开日期选择器时，日期为美国（例如 input=9/1/2019，日期选择器显示 2019 年 9 月的第一个日期)