CODEWITHSUNDEEP
angularangular-materialangular-reactive-forms
anonymous
anonymous

Reputation: 1681

mat date picker selected date is not matching

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.

Upvotes: 0

Views: 1738

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 2

Related Questions