求助：Angular Material Datepicker无法显示后端返回的日期

嘿，我来帮你搞定这个Angular Material Datepicker的问题～ 你遇到的情况其实挺常见的，核心问题在于Angular Material的Datepicker默认依赖特定的日期适配器和格式配置，光转字符串格式可能不够，我来给你拆解原因和解决方案：

为什么你用Moment没成功？ #

大概率是这两个坑没踩对：

1. 没配置Moment日期适配器：Angular Material默认用原生Date对象处理日期，如果你用Moment，必须替换成MomentDateAdapter，否则Datepicker根本识别不了Moment对象或你转的字符串。
2. 没指定Moment的解析格式：直接moment(this.myDate)可能会把30-10-2019误判成MM-DD-YYYY（毕竟10>12，可能会解析失败），必须明确告诉Moment你的输入格式是DD-MM-YYYY。

用Moment的正确解决方案 #

第一步：安装依赖 #

先确保你装了必要的包：

npm install moment @angular/material-moment-adapter

第二步：配置模块的日期适配器和格式 #

在你的根模块（比如AppModule）里配置Moment适配器和自定义格式：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

// 自定义适配后端DD-MM-YYYY的格式
export const MY_MOMENT_FORMATS = {
  parse: {
    dateInput: 'DD-MM-YYYY', // 指定解析时的输入格式
  },
  display: {
    dateInput: 'DD-MM-YYYY', // Datepicker显示的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule // 引入Moment模块
  ],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_MOMENT_FORMATS }
  ]
})
export class AppModule {}

第三步：组件里正确转换日期 #

在组件中，明确用Moment解析你的后端日期字符串：

import moment from 'moment';

// 假设this.myDate是后端返回的"30-10-2019"
this.selectedDate = moment(this.myDate, 'DD-MM-YYYY'); // 必须指定解析格式

模板绑定 #

最后在模板里绑定变量：

<mat-form-field>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

不用Moment的解决方案（原生Date） #

如果你不想依赖Moment，有两种简单方法：

方法一：手动转换字符串为Date对象 #

注意原生Date的月份是0-based（0代表1月，11代表12月），所以要把后端的月份减1：

// 后端返回的日期字符串："30-10-2019"
const [day, month, year] = this.myDate.split('-');
// 月份减1是关键！
this.selectedDate = new Date(+year, +month - 1, +day);

然后直接把selectedDate绑定到Datepicker即可。

方法二：自定义原生Date适配器（全局支持） #

如果需要整个应用都支持DD-MM-YYYY格式，可以自定义一个适配器：

1. 创建自定义适配器文件custom-date-adapter.ts：

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

export class CustomDateAdapter extends NativeDateAdapter {
  // 重写解析方法，处理DD-MM-YYYY格式
  override parse(value: any): Date | null {
    if (typeof value === 'string' && value) {
      const [day, month, year] = value.split('-');
      return new Date(+year, +month - 1, +day);
    }
    return super.parse(value);
  }

  // 重写格式化方法，显示DD-MM-YYYY
  override format(date: Date): string {
    const day = date.getDate().toString().padStart(2, '0');
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
  }
}

2. 在根模块里配置适配器和格式：

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { CustomDateAdapter } from './custom-date-adapter';

export const MY_NATIVE_FORMATS = {
  parse: {
    dateInput: 'DD-MM-YYYY',
  },
  display: {
    dateInput: 'DD-MM-YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  imports: [MatDatepickerModule],
  providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_NATIVE_FORMATS }
  ]
})
export class AppModule {}

3. 组件里直接赋值即可：

this.selectedDate = this.myDate; // 直接用后端返回的"30-10-2019"字符串

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