Material Angular 6 DatePicker is parsing my date 1 day before

问题

There's something really weird happening to the current version of the Material Angular DatePicker, after I updated it from A5 to A6 it started to parse my date 1 day before, the example is here: https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date

I'm using the original documentation example with a slight change on the language to my own language, and applying a custom date value to the ngModel so it can parse.

But you can check the code here:

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

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

Does anyone knows how to fix that?

回答1:

So, after a little bit of research I've find out that it was a timezone issue. To temporary fix it, I had to concatenate T00:00:00 to the end of my date that was coming from backend under the format yyyy/MM/dd.

The best option is, if it's possible, to the backend to change the format to yyyy/MM/ddTHH:mm:ss.

Otherwise there's 2 options to solve the problem when you have to use the format yyyy/MM/dd in your Angular 6 Material DatePicker: te bad and the good.

The bad (and possible just a temporary) is to do what I did, concatenate T00:00:00 to the end of the date before the DatePicker parses it.
The good is to actually get the date string, convert it into date, convert the timezone to GMT and then allow the DatePicker to parse it.

I hope I can help the desperate all over, like me.

回答2:

For anyone who just wants their dates to be UTC dates and is stuck using the JS Date object via DatePicker, you can just add an adapter option to the @NgModule providers:

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

You'll need add @angular/material-moment-adapter to your package.json and import the module/options object:

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

Once this is done, any DatePicker will provide UTC dates, and considering there's no opportunity to select a time component with DatePicker, this seems appropriate.

Pulled from the Material DatePicker info.

回答3:

You can do a parse function, like this:

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

return newDate;

来源：https://stackoverflow.com/questions/50743810/material-angular-6-datepicker-is-parsing-my-date-1-day-before

标签

angular

typescript

datepicker

angular-material