Angular Material Datepicker - Material18+ 的本地化

Question

我使用 Angular Material 18 和 Datepicker 组件。我尝试使用局部变化并尽量避免

moment

。原因是

moment

已被弃用。我尝试使用

DateFns

实现。

我尝试遵循已经提出的问的问题，但我没有成功。目前，我的应用程序的几个部分尚未独立，因此该方法似乎（仍然）合理。

我尝试包含上述内容

provider: [
{provide: MAT_DATE_LOCALE, useValue: "de"},
{provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS},
...

这编译于

<mat-form-field>
    <mat-label >Release date</mat-label>
    <input
        formControlName="releaseDate"
        matInput
        [matDatepicker]="picker4release"
    />
    <mat-datepicker-toggle matSuffix [for]="picker4release"></mat-datepicker-toggle>
    <mat-datepicker #picker4release></mat-datepicker>
</mat-form-field>

当我尝试打开日期选择器时，我得到了

core.mjs:7195 ERROR TypeError: Cannot read properties of undefined (reading 'preprocessor')
    at format (format.mjs:371:23)
    at _DateFnsAdapter.format (material-date-fns-adapter.mjs:136:12)
    at get periodButtonDescription (datepicker.mjs:2612:32)
    at MatCalendarHeader_Template (datepicker.mjs:2742:36)
    at executeTemplate (core.mjs:11791:5)
    at refreshView (core.mjs:13344:7)

也在努力

registerLocaleData(localeDe);
registerLocaleData(localeEn);

@NgModule({
....
provider: [
        {provide: MAT_DATE_LOCALE, useValue: localeDe},

没有帮助。有什么提示如何正确使用它吗？

Answer 1

首先确保您将

date-fns

添加到您的项目中。

npm i date-fns

然后使用 add 添加

@angular/material-date-fns-adapter

。

ng add @angular/material-date-fns-adapter

然后您需要添加提供者

provideDateFnsAdapter

，如下面的注释所示，可以在

bootstrapApplication

级别添加，也可以在

standalone component

级别添加。

您需要的核心提供商是。

 importProvidersFrom(MatNativeDateModule),
{ provide: MAT_DATE_LOCALE, useValue: ja },
{ provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },

组件代码如下所示。请注意，使用 date-fns 时，您需要使用 import 添加区域设置

import { fr, ja } from 'date-fns/locale';

。

import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
import { fr, ja } from 'date-fns/locale';

...

...
@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrl: 'datepicker-locale-example.css',
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    { provide: MAT_DATE_LOCALE, useValue: ja },
    { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },

    // date-fns can be provided globally to your app by adding `provideDateFnsAdapter`
    // to your app config. We provide it at the component level here, due to limitations
    // of our example generation script.
    provideDateFnsAdapter(),
  ],
  ...

现在您可以专注于语言切换。同样，我们不将语言环境作为字符串提供，而是作为其导入如上所示的对象提供。

现在，我们可以通过更改 locale 对象来切换语言。

import { fr, ja } from 'date-fns/locale';
...

...
french() {
  this._locale.set(fr);
  this._adapter.setLocale(this._locale());
  this.updateCloseButtonLabel('Fermer le calendrier');
}
...

完整代码：

import {
  ChangeDetectionStrategy,
  Component,
  OnInit,
  computed,
  inject,
  signal,
} from '@angular/core';
import {
  DateFnsAdapter,
  MAT_DATE_FNS_FORMATS,
  provideDateFnsAdapter,
} from '@angular/material-date-fns-adapter';
import { MatButtonModule } from '@angular/material/button';
import {
  DateAdapter,
  MAT_DATE_FORMATS,
  MAT_DATE_LOCALE,
} from '@angular/material/core';
import {
  MatDatepickerIntl,
  MatDatepickerModule,
} from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { fr, ja } from 'date-fns/locale';

/** @title Datepicker with different locale */
@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrl: 'datepicker-locale-example.css',
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.

    // Moment can be provided globally to your app by adding `provideDateFnsAdapter`
    // to your app config. We provide it at the component level here, due to limitations
    // of our example generation script.
    provideDateFnsAdapter(),
  ],
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatButtonModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatepickerLocaleExample implements OnInit {
  private readonly _adapter =
    inject<DateAdapter<unknown, unknown>>(DateAdapter);
  private readonly _intl = inject(MatDatepickerIntl);
  private readonly _locale = signal(inject<unknown>(MAT_DATE_LOCALE));
  readonly dateFormatString = computed(() => {
    if (this._locale() === 'ja-JP') {
      return 'YYYY/MM/DD';
    } else if (this._locale() === 'fr') {
      return 'DD/MM/YYYY';
    }
    return '';
  });

  ngOnInit() {
    this.updateCloseButtonLabel('カレンダーを閉じる');
  }

  french() {
    this._locale.set(fr);
    this._adapter.setLocale(this._locale());
    this.updateCloseButtonLabel('Fermer le calendrier');
  }

  updateCloseButtonLabel(label: string) {
    this._intl.closeCalendarLabel = label;
    this._intl.changes.next();
  }
}

/**  Copyright 2024 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license */

Stackblitz 演示