mat-datepicker日期格式异常：输入日期显示为分数形式

1. 排查样式冲突 #

这种日期被显示成分数的情况，大概率是全局CSS样式干扰了输入框的字体渲染。比如某些全局input样式设置了font-variant-numeric: slashed-zero或类似属性，会把日期中的斜杠识别成分数分隔符。给Mat-Datepicker的输入框单独覆盖样式即可解决：

.mat-datepicker-input input {
  font-variant-numeric: normal !important;
}

2. 配置正确的日期格式 #

如果样式没问题，可能是Angular Material的日期格式未正确配置，导致输入的日期被错误解析。按以下步骤配置：

• 在你的模块中导入相关模块，并自定义日期格式常量：

import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MatDatepickerModule, MatNativeDateModule } from '@angular/material/datepicker';

// 自定义日期格式，适配MM/DD/YYYY的输入和显示
export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'L',
  },
  display: {
    dateInput: 'L',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  imports: [
    // ...其他模块
    MatDatepickerModule,
    MatNativeDateModule
  ],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ]
})
export class YourModule { }

• 确保表单控件的初始值为Date类型，而非字符串，避免解析错误：

// 组件内的表单初始化
this.yourForm = this.formBuilder.group({
  fechaNacimiento: [new Date(), Validators.required]
});

3. 验证表单代码 #

你的现有模板代码本身没有语法问题，但要确保formControlName对应的表单控件已在组件中正确初始化，且关联的表单组已绑定到模板。

内容的提问来源于stack exchange，提问作者Ariel Spais