mat date picker selected date is not matching

Question

The selected date from the mat date picker and its value in the reactive form is not matching.

ngOnInit() {
    this.findForm = this._fb.group({
      date: ['', Validators.required]
    });
}

And in the template,

<mat-form-field [formGroup]="findForm">
  <input matInput formControlName="date" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<pre>{{this.findForm.get('date').value |json }}</pre>

I have the full working code on stackblitz

Select a date and you see the selected date and its value in the reactive form is not same.

It's picking the UTC date, and displaying the local date after any time difference — user184994, Oct 28 '18 at 08:54
Possible duplicate of [day incorrect in angular material datepicker](https://stackoverflow.com/questions/48710053/day-incorrect-in-angular-material-datepicker) — user184994, Oct 28 '18 at 09:01

score 2 · Answer 1 · answered Oct 28 '18 at 09:10

2

As mentioned in the comments, Dates from the MatDatePicker are in UTC format. But you can convert those into the local format using this:

formatDate() {
  var date = new Date(`${this.findForm.value.date} UTC`);
  return date.toString();
}

And in template:

<mat-form-field [formGroup]="findForm">
  <input matInput formControlName="date" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<pre>{{ formatDate() }}</pre>

Here's a Sample StackBlitz for your ref.

answered Oct 28 '18 at 09:10

SiddAjmera

38,129
5
72
110

@anonymous, doesn't work as in? Doesn't work the way you want it to be? Or doesn't open/work in general? – SiddAjmera Oct 29 '18 at 07:01
The date is null. – anonymous Oct 29 '18 at 07:25
Initially, it is null and so it shows Invalid Date. But then when you select a date, it shows the correct date. – SiddAjmera Oct 29 '18 at 07:26

mat date picker selected date is not matching

1 Answers1