Angular material Datepicker get value on change

Question

I'm using the new version of angular and angular material. I need to get the value of the datepicker at the moment the user change the date to then pass that value to a function and do something.

datepicker

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onChange($event)"></mat-datepicker>
  </mat-form-field>

and this the function.

  public onChange(event: any, newDate: any): void {
    console.log(event.target.value);
    // this.getData(newDate);
  }

This seems to be working for me, [check here](https://plnkr.co/edit/rx5ddns6dWM7CdmqnKWg?p=preview) — Pankaj Parkar, Oct 26 '17 at 19:36
I fixed. The datepicker was missing the event for some reason that still don´t why. — Miguel Frias, Oct 26 '17 at 19:49
I assume you just want the value, so you can use `console.log(event)` ? https://plnkr.co/edit/8c21pXDrx7OCq93Gppa0?p=preview — AT82, Oct 28 '17 at 09:14
Don't you already have the value in the ngModel binding for the input field? I don't think you need the ngModel for the #picker itself. (btw - I know this is an old post, but just looking for testing my datePicker in jasmine test and ran across this.) — djmarquette, Dec 21 '18 at 14:40

score 38 · Answer 1 · answered Nov 29 '17 at 11:50

<mat-form-field>
  <input matInput [matDatepicker]="expiration1" placeholder="Expiration" [formControl]="expiration" required (dateChange)="EndDateChange($event)">
  <mat-datepicker-toggle matSuffix [for]="expiration1"></mat-datepicker-toggle>
  <mat-datepicker #expiration1></mat-datepicker>
</mat-form-field>

Please check this demo link So you will get more idea. Example

score 17 · Accepted Answer · edited Jul 06 '20 at 05:37

17

Sorry I didn't post the answer before, but I solved the problem with the @AJT_82's comment. Here is the code:

Component HTML

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onDate($event)"></mat-datepicker>
  </mat-form-field>

compoment ts

  public onDate(event): void {
    this.roomsFilter.date = event;
    this.getData(this.roomsFilter.date);
  }

Basically, I just passed the $event of the datepicker to get the value.

edited Jul 06 '20 at 05:37

CJ Dennis

4,226
2
40
69

answered Nov 30 '17 at 11:32

Miguel Frias

2,544
8
32
53

11

`selectedChanged` seems to be removed in later versions of mat-datepicker – rainversion_3 Oct 04 '19 at 16:51
Is there a solution for that? – Géza May 04 '22 at 07:19

De Bonheur · Answer 3 · 2022-05-20T20:59:24.957

17

According to the official documentation, the MatDatepickerInput has a dateInput EventEmitter and it emits the selected date.

<mat-form-field>
 <input (dateInput)="OnDateChange($event.value)" matInput [matDatepicker]="picker" 
 [placeholder]="field.label" />
 <mat-datepicker-toggle matSuffix [for]="picker"> </mat-datepicker-toggle>
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

edited May 20 '22 at 20:59

answered Oct 17 '19 at 18:02

De Bonheur

742
10
13

1

input tag not closed? – Jonath P Feb 23 '21 at 17:44
It's closed on the line below, the "[placeholder]="field.label" " belongs to it – Morato_dev May 20 '22 at 20:03
@JonathP it's closed by the line juste below – De Bonheur May 20 '22 at 20:58

Angular material Datepicker get value on change

3 Answers3

Linked