如何在Angular Material DatePicker中将ISO8601格式日期显示为dd-mm-yyyy格式？

看起来你遇到的核心问题是依赖本地化格式符'L'没有输出预期的短横线分隔日期，咱们直接用自定义格式字符串来搞定这个问题，步骤如下：

1. 确认依赖安装（若未安装） #

因为你用了MomentDateAdapter，需要确保相关依赖已安装：

npm install moment @angular/material-moment-adapter

2. 修改日期格式配置 #

把MY_FORMATS里的格式符从'L'改成明确的'DD-MM-YYYY'——这是Moment.js的标准格式语法，DD代表两位日期、MM代表两位月份、YYYY代表四位年份，用短横线分隔：

export const MY_FORMATS = {
  parse: {
    dateInput: 'DD-MM-YYYY', // 解析用户输入或绑定的日期格式
  },
  display: {
    dateInput: 'DD-MM-YYYY', // DatePicker显示的日期格式
    monthYearLabel: 'MM YYYY',
    dateA11yLabel: 'LL', // 无障碍模式用更友好的长日期格式
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

3. 正确转换后端的ISO日期字符串 #

从后端拿到的ISO格式字符串（比如2021-08-29T22:00:00）需要转换成Moment对象或Date对象再绑定到date变量：

import * as moment from 'moment';

// 推荐用Moment对象适配MomentDateAdapter
this.date = moment('2021-08-29T22:00:00');

// 或者用原生Date对象也可以
this.date = new Date('2021-08-29T22:00:00');

4. 可选：确认区域设置（非必须） #

如果还是有异常，可以在模块中指定支持日在前的区域（比如西班牙语区），不过用了自定义格式后这一步影响不大：

import { MAT_DATE_LOCALE } from '@angular/material/core';

@NgModule({
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'es-ES' },
    // 其他提供者...
  ]
})

为什么之前的'L'不生效？ #

'L'是Moment.js的本地化格式符，它的输出依赖当前区域设置：比如默认en-US区域下'L'是MM/DD/YYYY，es-ES区域下是DD/MM/YYYY，但都是斜杠分隔，不会自动用短横线。直接指定自定义格式字符串'DD-MM-YYYY'是最可靠的方式，不受区域设置影响。

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