Используйте utc + 0 с MAT_DATE_LOCALE в Angular Материал 8 - PullRequest
Новая
       5

Используйте utc + 0 с MAT_DATE_LOCALE в Angular Материал 8

1 голос
/ 10 апреля 2020

Я использую Angular 8 и Angular Материал 8. У моего приложения есть этот код в AppModule: 

{ provide: MAT_DATE_LOCALE, useFactory: "myFunctionToGetServerLanguageCode" }

Где myFunctionToGetServerLanguageCode - это метод, который возвращает строку типа «en-US» (на основе сервера). Затем у меня есть этот компонент с датщиком из Angular Материал с этими указанными c провайдерами: 

    providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
],

Таким образом, я намеревался:

  • использовать момент с datePicker;
  • , чтобы заставить указатель даты использовать utc + 0;
  • , чтобы использовать тот же формат, что и культура;

Например, с MAT_DATE_LOCALE с "en -US ": Если я выберу 10 апреля 2020 года, я ожидал, что сборщик покажет« 04/10/2020 »(например, с форматом« L », который будет установлен как MM / DD / YYYY) и выдаст« 2020-04- 10T00: 00: 00.000Z "

В результате сборщик выдает" 2020-04-09T23: 00: 00.000Z ". Используя инструменты разработчика, выдается значение Moment с частным свойством "_isUt c", установленным как false.

Где я ошибаюсь?

1 Ответ

0 голосов
/ 14 апреля 2020

Я нашел проблему: я заменил эти: 

 providers: [
 { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
 { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
 { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }]

на: 

providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, 
  MAT_MOMENT_DATE_ADAPTER_OPTIONS] },
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }, 
{
    provide: MAT_DATE_FORMATS, useValue: {
        parse: {
            dateInput: "L",
        },
        display: {
            dateInput: "L",
            monthYearLabel: "MMM YYYY",
            dateA11yLabel: "LL",
            monthYearA11yLabel: "MMMM YYYY",
        },
    }
}]

Да! Я надеюсь, что это может помочь кому-то еще!

...