Angular Material日期选择器Firefox显示异常问题求助

问题现象 #

使用Angular Material日期选择器时，仅在Firefox浏览器中出现异常：部分日期（尤其是每月1号）的日和年会显示为奇怪的分数格式，Chrome和Edge中无此问题，多数场景下日期选择器运行正常。

相关代码 #

<mat-form-field appearance="outline" class='datepicker regulartext'>
    <mat-label>{{ label }}</mat-label>
    <input matInput [matDatepicker]="picker" [formControlName]="name" [min]="todayDate">
    <mat-hint>Format: MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

异常显示效果 #

解决思路 #

• 调整Firefox字体渲染配置：Firefox默认开启了部分字体的分数数字渲染特性，可在浏览器about:config中搜索layout.css.font-features.enabled，将其设置为false，验证是否为字体特性导致的显示问题。
• 强制指定日期选择器字体：为日期选择器相关元素添加CSS样式，强制使用不支持分数数字渲染的字体，示例：

  .mat-input-element, .mat-calendar-body-cell-content {
      font-family: Arial, Helvetica, sans-serif !important;
  }
  

• 自定义日期格式化规则：不依赖Angular Material默认格式化，通过MAT_DATE_FORMATS自定义日期输出格式，确保输出纯数字字符串，避免浏览器自动解析为分数：

  import { MAT_DATE_FORMATS } from '@angular/material/core';
  
  export const CUSTOM_DATE_FORMATS = {
    parse: {
      dateInput: 'MM/DD/YYYY',
    },
    display: {
      dateInput: 'MM/DD/YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };
  
  @NgModule({
    providers: [
      { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
    ]
  })
  export class YourModule { }
  

• 升级Angular Material版本：该问题可能是特定版本的Angular Material与Firefox的兼容性bug，尝试升级到最新稳定版，查看官方是否已修复此类问题。
• 规范日期对象构造：确保绑定的日期值（如todayDate）构造正确，避免时区或时间戳精度导致的解析异常，比如使用new Date(Date.UTC(year, month, day))来构造无时区偏移的日期。

内容的提问来源于stack exchange，提问作者shine-dev