Material Angular 6 DatePicker is parsing my date 1 day before

Question

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?

Solution 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.

Solution 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.

Solution 3

You can do a parse function, like this:

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

return newDate;

Comments

[ErickXavier]

Not a bad idea.

[Tomás]

In my case I was Using java.time.LocalDate in the backend istead of java.time.LocalDateTime. Change the type of Date and problem solved