Material Angular 6 DatePicker is parsing my date 1 day before

13
votes

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?

3
angulartypescriptdatepickerangular-material
are you in a negative offset timezone ? – Pac0
I'm at UTC+1 / UTC+2 here and I don't have any trouble, so I guess it's related to a local display of date, timezine related. i.stack.imgur.com/9FPfn.png – Pac0
@Pac0 I'm in -3h, I had my code wrong, please update your screen and tell me if it's ok. – ErickXavier
Here is what I see when I start the application : i.stack.imgur.com/PDwDv.png . Nothing changes when I click "switch to French". If I change the date, then I have.this (message changed) : i.stack.imgur.com/lIjwT.png . And clicking on the switch button doesn't change anything either. However, no problem with the date (on my side) – Pac0
Tested the stackblitz as well, no issue on my side. – penleychan

3 Answers

12
votes

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.

6
votes

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.

4
votes

You can do a parse function, like this:

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

return newDate;