Угловой материал DatePicker не меняется, когда локаль Moment делает - PullRequest
Новая
       22

Угловой материал DatePicker не меняется, когда локаль Moment делает

0 голосов
/ 03 января 2019

Детали: угловой материал 7 DatePicker с моментом js

Проблема: при смене языка моего веб-приложения средства выбора даты не меняют язык.

Желаемый результат. Каждый раз, когда я изменяю язык в своем приложении, мои средства выбора даты также должны меняться на этот формат и язык. На данный момент мне нужно переключиться между дд / мм / гггг и мм / дд / гггг.

Может ли кто-нибудь указать мне правильное направление? Я новичок в данный момент и, кажется, не могу сделать правильно форматирование.

Код:

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);
});

1 Ответ

0 голосов
/ 03 января 2019

Я пропустил это в угловой документации.Если кто-то еще сталкивался с этой копкой для получения той же информации, убедитесь, что вы используете адаптер данных для установки своего языка. 

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

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