multilingual - Angular MatDatePicker with German language - Stack Overflow

admin管理员组

文章数量:1123196

I try to get German language in my MatDataPicker. But it stay in English. I work with Angular 18.2.10 and have installed @angular/material-moment-adapter#18.2 and moment#2.30.1.

This is my html:

<p>home works!</p>

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="datePickerCtrl">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

My ts file is:

import { Component } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MomentUtcDateAdapter, MY_FORMATS } from '../../../services/common/moment-utc-date-adapter';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatDatepickerModule
  ],
  templateUrl: './homeponent.html',
  styleUrl: './homeponent.scss',
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
    { provide: DateAdapter, useClass: MomentUtcDateAdapter },
  ]
})
export class HomeComponent {
  datePickerCtrl = new FormControl();

  constructor() {
    this.datePickerCtrl.valueChanges.subscribe(x => {
      console.log('date value changed', x);
    })
  }
}

And at the end my MomentUtcDateAdapter, written by Bruno Cerecetto and extended by a format for leading zeros, is:

import { Inject, Injectable, Optional } from "@angular/core";
import { MAT_DATE_LOCALE, MatDateFormats } from "@angular/material/core";
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';
import * as moment from 'moment';

@Injectable()
export class MomentUtcDateAdapter extends MomentDateAdapter {

  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
  }

  override createDate(year: number, month: number, date: number): Moment {
    // Moment.js will create an invalid date if any of the components are out of bounds, but we
    // explicitly check each case so we can throw more descriptive errors.
    if (month < 0 || month > 11) {
      throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`);
    }

    if (date < 1) {
      throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
    }

    let result = moment.utc({ year, month, date }).locale(this.locale);

    // If the result isn't valid, the date must have been out of bounds for this month.
    if (!result.isValid()) {
      throw Error(`Invalid date "${date}" for month with index "${month}".`);
    }

    return result;
  }
}

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

The result is:

Why does it still show DEC as December instead of Dezember and why are the names of the days also the English abbreviation?

本文标签： multilingualAngular MatDatePicker with German languageStack Overflow