web-dev-qa-db-fra.com

Material Angular 6 DatePicker analyse ma date 1 jour avant

Il se passe quelque chose de vraiment bizarre avec la version actuelle du Material Angular DatePicker, après l'avoir mis à jour de A5 à A6, il a commencé à analyser ma date 1 jour avant, l'exemple est ici: https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date

J'utilise l'exemple de documentation d'origine avec une légère modification de la langue dans ma propre langue et j'applique une valeur de date personnalisée au ngModel afin qu'il puisse analyser.

Mais vous pouvez vérifier le code ici:

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

Le 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>

Est-ce que quelqu'un sait comment résoudre ce problème?

angulartypescriptdatepickerangular-material
11
ErickXavier

Donc, après un peu de recherche, j'ai découvert que c'était un problème de fuseau horaire. Pour le corriger temporairement, j'ai dû concaténer T00: 00: jusqu'à la fin de ma date qui provenait du backend sous le format aaaa/MM/jj.

La meilleure option est, si c'est possible, pour le backend de changer le format en aaaa/MM/jjTHH: mm: ss.

Sinon, il y a 2 options pour résoudre le problème lorsque vous devez utiliser le format aaaa/MM/jj dans votre Angular 6 Material DatePicker: te mauvais et le bon).

  • Le mauvais (et peut-être juste un temporaire) est de faire ce que j'ai fait, de concaténer T00: 00: jusqu'à la fin de la date avant que le DatePicker ne l'analyse.
  • Le bon est d'obtenir réellement la chaîne de date, de la convertir en date, de convertir le fuseau horaire en GMT, puis de permettre au DatePicker de l'analyser.

J'espère pouvoir aider les désespérés partout, comme moi.

6
ErickXavier

Pour toute personne souhaitant simplement que ses dates soient des dates UTC et bloquée à l'aide de l'objet JS Date via DatePicker, vous pouvez simplement ajouter une option d'adaptateur à la @NgModule fournisseurs:

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

Vous devrez ajouter @angular/material-moment-adapter à ton package.json et importez l'objet module/options:

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

Une fois cela fait, tout DatePicker fournira des dates UTC, et étant donné qu'il n'y a aucune possibilité de sélectionner un composant de temps avec DatePicker, cela semble approprié.

Tiré de Material DatePicker info .

5
bsplosion

Vous pouvez faire une fonction d'analyse, comme ceci:

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

return newDate;
2
João Portella