Angular Material DatePicker折叠控件日期格式自定义求助

解决方案 #

要将「Verbose datepicker」下方折叠控件的日期显示从December 25, 2023改为25-Dec-2023，可通过以下两种方式实现：

方式1：模板内直接用日期管道格式化

找到折叠面板中绑定日期的代码，添加Angular内置date管道并指定目标格式：

{{ 你的日期变量 | date:'dd-MMM-yyyy' }}

这种方式仅针对折叠控件的显示做格式化，操作简单直接。

方式2：全局配置Material日期格式（推荐，统一全组件显示）

在datepicker-formats-example.ts文件中，修改自定义的MY_FORMATS对象内的display格式：

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'dd-MMM-yyyy', // 替换原有格式字符串
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

确保组件已正确注入MAT_DATE_FORMATS配置：

@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})

修改后，日期选择器输入框与折叠控件的日期显示会统一为25-Dec-2023格式。

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