如何通过GET请求将后端已保存日期显示在mat-datepicker输入框中

要让你的mat-datepicker正确显示后端返回的日期（比如"Juli 1, 2018"转成DD-MM-YYYY格式），你需要完成两个关键操作：把后端的日期字符串解析成Angular日期选择器能识别的Date对象，再配置它的显示格式。下面是一步步的实现：

1. 获取后端数据并解析日期字符串 #

首先，在组件初始化阶段调用你的数据服务，拿到后端返回的日期后，把它转成Date对象。注意"Juli"是德语的七月，大部分浏览器能直接解析这种格式，但为了兼容性，也可以用更稳妥的手动映射方式：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { YourDataService } from './path-to-your-service'; // 替换成你的服务实际路径

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  dateForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private dataService: YourDataService
  ) { }

  ngOnInit() {
    this.dateForm = this.formBuilder.group({
      financial_year_start: [null, Validators.required],
    });

    // 调用服务获取数据并处理日期
    this.dataService.getCurrentMandantData().subscribe(resp => {
      if (resp.success && resp.mandant) {
        const backendDate = resp.mandant.financial_year_start;
        
        // 方式1：直接用Date构造函数解析（大部分浏览器支持德语月份）
        const parsedDate = new Date(backendDate);

        // 方式2：手动映射德语月份（兼容所有场景）
        // const monthMap = {
        //   'Januar': 0, 'Februar':1, 'März':2, 'April':3, 'Mai':4, 'Juni':5,
        //   'Juli':6, 'August':7, 'September':8, 'Oktober':9, 'November':10, 'Dezember':11
        // };
        // const [monthStr, dayStr, year] = backendDate.split(' ');
        // const day = parseInt(dayStr.replace(',', ''), 10);
        // const parsedDate = new Date(year, monthMap[monthStr], day);

        // 把解析后的日期赋值给表单控件
        this.dateForm.patchValue({
          financial_year_start: parsedDate
        });
      }
    });
  }
}

2. 配置mat-datepicker显示为DD-MM-YYYY格式 #

默认的mat-datepicker显示格式不是DD-MM-YYYY，所以需要自定义日期格式配置：

第一步：创建日期格式配置文件 #

在项目里新建一个date-formats.ts文件，内容如下：

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

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'DD-MM-YYYY', // 输入框的解析规则
  },
  display: {
    dateInput: 'DD-MM-YYYY', // 输入框显示的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

第二步：在组件中注入这个配置 #

回到你的组件，导入配置并添加到providers数组里：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { CUSTOM_DATE_FORMATS } from './date-formats'; // 替换成你的文件路径
import { YourDataService } from './path-to-your-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class YourComponent implements OnInit {
  // 其余代码保持不变
}

小提示 #

• 确保你已经在模块中导入了MatDatepickerModule和MatNativeDateModule（或你使用的其他日期适配器模块）。
• 如果需要支持多语言，建议结合Angular的DatePipe或者@angular/localize来处理，这样扩展性更好。

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