Материал Angular 6 DatePicker анализирует мою дату за 1 день до - PullRequest
Новая
       10

Материал Angular 6 DatePicker анализирует мою дату за 1 день до

0 голосов
/ 07 июня 2018

В текущей версии Material Angular DatePicker происходит что-то действительно странное, после того как я обновил его с A5 до A6, он начал анализировать мою дату за 1 день до этого, пример здесь: https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date

Я использую исходный пример документации с небольшим изменением языка на свой собственный язык и применяю пользовательское значение даты для ngModel, чтобы он мог анализировать.

Но вы можете проверить код здесь: 

import {Component} from '@angular/core';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrls: ['datepicker-locale-example.css'],
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'pt'}, //my change from the original documentation example
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerLocaleExample {
  constructor(private adapter: DateAdapter<any>) {}

  private someDate = '2018-01-31'; //my change from the original documentation example

  french() {
    this.adapter.setLocale('fr');
  }
}

HTML: 

<mat-form-field>
  <input matInput [matDatepicker]="myDatePicker" placeholder="Different locale" [(ngModel)]="someDate"> <!-- my change from the original documentation example -->
  <mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatePicker></mat-datepicker>
  <mat-hint>Actual Date: {{someDate}}</mat-hint>
</mat-form-field>

<button mat-button (click)="french()">Dynamically switch to French</button>

Кто-нибудь знает, как это исправить?

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Для тех, кто просто хочет, чтобы их даты были датами UTC и застрял с помощью объекта JS Date через DatePicker, вы можете просто добавить опцию адаптера для @NgModule провайдеров: 

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})

You 'Вам нужно будет добавить @angular/material-moment-adapter к вашему package.json и импортировать объект модуля / опций: 

import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule} from '@angular/material-moment-adapter';

Как только это будет сделано, любой DatePicker предоставит даты UTC, и, учитывая, что нет возможности выбрать компонент временис DatePicker это кажется подходящим.

Извлечено из Информация о DatePicker материала .

0 голосов
/ 26 марта 2019

Вы можете выполнить функцию разбора, например: 

let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());

return newDate;
0 голосов
/ 13 июня 2018

Итак, после небольшого исследования я обнаружил, что это была проблема часового пояса.Чтобы временно исправить это, мне пришлось объединить T00: 00: 00 до конца моей даты, которая поступала из бэкэнда в формате гггг / мм / дд .

Наилучшим вариантом является, если это возможно, для бэкэнда изменить формат на гггг / мм / ддтчч: мм: сс .

В противном случае есть 2 варианта решения проблемы, когдаВы должны использовать формат гггг / мм / дд в вашем Angular 6 Material DatePicker: плохое и хорошее.

  • Плохое (и, возможно, просто временное)сделайте то, что я сделал, конкатенируйте T00: 00: 00 до конца даты до того, как DatePicker его проанализирует.
  • Хорошо, чтобы фактически получить строку даты, преобразовать ее в дату,преобразовать часовой пояс в GMT, а затем позволить DatePicker разобрать его.

Я надеюсь, что смогу помочь отчаявшимся во всем, как я.

...