如何在Angular中为德语自定义带前导零的日期格式？

问题核心是默认NativeDateAdapter对德语地区的日期格式未强制两位数的日和月，通过自定义DateAdapter即可解决。

步骤1：创建自定义DateAdapter #

新建custom-native-date-adapter.ts文件，继承NativeDateAdapter并覆盖format方法，根据locale指定日期格式：

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

@Injectable()
export class CustomNativeDateAdapter extends NativeDateAdapter {
  override format(date: Date, displayFormat: Object): string {
    switch (this.locale) {
      case 'de-DE':
        // 强制日、月为两位数，格式dd.MM.yyyy
        return formatDate(date, 'dd.MM.yyyy', this.locale);
      case 'en-GB':
        // 英文保持预期格式，可根据需求调整
        return formatDate(date, 'dd/MM/yyyy', this.locale);
      default:
        return super.format(date, displayFormat);
    }
  }
}

步骤2：替换默认DateAdapter提供者 #

修改app.config.ts，将默认的provideNativeDateAdapter替换为自定义适配器：

import { ApplicationConfig } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import { CustomNativeDateAdapter } from './custom-native-date-adapter';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: DateAdapter, useClass: CustomNativeDateAdapter },
    // 可选：设置默认locale，若初始语言不是德语可调整
    // { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
    // 其他原有提供者...
  ]
};

步骤3：保留原有语言切换逻辑 #

你在app.component.ts中的语言监听代码无需修改，setLocale会自动触发自定义适配器的locale更新，确保切换语言时日期格式同步变化：

constructor(
  private translocoService: TranslocoService,
  private dateAdapter: DateAdapter<Date>,
) {}

async ngOnInit() {
  this.dateAdapter.setLocale(this.translocoService.getActiveLang());
  this.translocoService.langChanges$.subscribe(lang => {
    this.dateAdapter.setLocale(lang === 'en' ? 'en-GB' : 'de-DE');
  });
}

扩展说明 #

如果需要支持更多日期显示场景（如长格式、短格式），可在format方法中判断displayFormat参数类型，例如：

override format(date: Date, displayFormat: Object): string {
  if (typeof displayFormat === 'string') {
    if (displayFormat === 'short' && this.locale === 'de-DE') {
      return formatDate(date, 'dd.MM.yyyy', this.locale);
    }
    if (displayFormat === 'long' && this.locale === 'de-DE') {
      return formatDate(date, 'dd. MMMM yyyy', this.locale);
    }
  }
  // 其他逻辑...
}

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