Angular Datepicker通过自定义管道按浏览器语言设置日期显示格式问题

问题原因 #

你给[value]绑定的是管道返回的格式化字符串，但Angular Material Datepicker的输入框要求绑定的是Date类型值，字符串类型的日期无法被组件识别，所以才会显示为空。

解决方案 #

方法1：全局配置Datepicker适配浏览器语言（推荐，不影响原始值） #

这是Angular Material官方推荐的修改显示格式的方式，配置完成后所有Datepicker都会自动根据浏览器语言切换显示格式，且你绑定的原始Date值不会被修改，传给后端的时候还是原来的日期值：

1. 首先在你的模块文件（比如app.module.ts）里导入相关依赖，添加提供者：

import { NgModule } from '@angular/core';
import { MAT_DATE_LOCALE, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';

// 自定义日期格式，用Intl根据当前语言格式化
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'l',
  },
  display: {
    dateInput: (date: Date) => new Intl.DateTimeFormat(navigator.language).format(date),
    monthYearLabel: (date: Date) => new Intl.DateTimeFormat(navigator.language, { month: 'long', year: 'numeric' }).format(date),
    dateA11yLabel: (date: Date) => new Intl.DateTimeFormat(navigator.language, { year: 'numeric', month: 'long', day: 'numeric' }).format(date),
    monthYearA11yLabel: (date: Date) => new Intl.DateTimeFormat(navigator.language, { month: 'long', year: 'numeric' }).format(date),
  },
};

@NgModule({
  // ... 其他导入、声明配置
  providers: [
    // 用浏览器语言作为Datepicker的默认语言
    { provide: MAT_DATE_LOCALE, useValue: navigator.language },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  ]
})
export class AppModule {
  constructor(private dateAdapter: DateAdapter<Date>) {
    // 适配器也适配浏览器语言
    this.dateAdapter.setLocale(navigator.language);
  }
}

2. 修改你的HTML代码，去掉自定义管道，直接绑定原始Date值即可：

<mat-form-field [floatLabel]="never" appearance="fill" id="xxx" class="textbox1" panelClass="option-panel">
  <mat-label>Choose a date</mat-label>
  <input [min]="todayDate" [disabled]="fun1()" readonly matInput [matDatepicker]="picker" 
         [value]="program.datetobeformatted" 
         [matDatepickerFilter]="myDateFilter" 
         (dateChange)="onChange($event, 'xxx', program, $index)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

如果不需要全局生效，只想给当前页面的Datepicker设置格式，把上面的providers配置放到对应组件的@Component配置的providers数组里即可。

关于不修改传给后端的原始值 #

上面的方案完全满足这个要求：你绑定的还是原始的program.datetobeformatted日期值，组件只是修改了显示层的格式，不会修改你存储的原始日期值，提交给后端的时候直接用原始值格式化即可，不需要做额外转换。

内容的提问来源于stack exchange，提问作者Deviprasad Sharma