Question

详细信息：角为js的Angular Material 7 DatePicker

问题：更改我的Web应用程序的语言时，日期选择器不会更改区域设置。

所需的结果：每当我在应用程序中更改语言时，我的日期选择器也应更改为该语言环境格式和语言。此刻，我需要在dd / MM / yyyy和MM / dd / yyyy之间切换。

有人能指出我正确的方向吗？我是新手，似乎无法正确完成格式化。

代码：

HTML

<mat-form-field>
  <mat-label>From date</mat-label>
  <input name="fromDate" [min]="minDate" [max]="maxDate" [formControl]="displayFromDate" 
                     matInput [matDatepicker]="fromDatePicker">
  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

我的一些翻译服务代码会更改瞬间的语言环境： lang参数将为“ en”或“ fr”，并通过应用程序正在监听的开关进行切换。

public use(lang: string): void {
  this._currentLang = lang;
  moment.locale(lang);      
  this.currentLang$.next(this.currentLang);
}

App.module.ts

import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';

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

import localeFr from '@angular/common/locales/fr';
import localeEn from '@angular/common/locales/en';

registerLocaleData(localeFr);
registerLocaleData(localeEn);

...

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,

...

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },],

使用日期选择器的组件代码：

this.translationService.currentLang$.subscribe(currentLang => {      
  this.displayFromDate = new FormControl({ value: moment(this.displayFromDate.value).format(), disabled: true });
  console.log('displayFromDate', this.displayFromDate);
});

Answer 1

我在角度文档中错过了这一点。如果有人通过这种方式获取相同的信息，请确保您正在使用数据适配器设置区域设置。

constructor(private adapter: DateAdapter<any>) {}

toggleLocale() {
  this.adapter.setLocale(moment.locale());
}

当Moment语言环境更改时，Angular Material DatePicker不更改

1 个答案: