Open angular mat-datepicker from typescript

Question

I have a select like this :

 <mat-select placeholder="..." (change)="onChange($event.value)">
     <mat-option *ngFor="let option of options" [value]="option.value">
        {{ option }}
     </mat-option>
 </mat-select>
 <div class="disable">
    <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
       <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
 </div>

disable class just hide the contain of the div.

In my onChange($event) :

onChange(value) {
   if(value === 'someValue'){
       openDatePicker() //How to do this ??
   }
}

If a specific value is selected i'd like to open the date picker. Is that possible to do this from typescript ?

Thanks for your response

see https://stackoverflow.com/questions/45874705/angular-material-2-date-picker-auto-open-on-focus/45874934#45874934 and https://material.angular.io/components/datepicker/api#MatDatepicker — Pengyy, Jun 01 '18 at 08:07

FAISAL · Answer 1 · 2018-06-01T08:14:48.863

13

You will need to get the datepicker in your code using ViewChild like this:

@ViewChild('picker') datePicker: MatDatepicker<Date>;

Then in your function, you can call the open() method of the datepicker:

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

Link to StackBlitz demo.

edited Jun 01 '18 at 08:14

answered Jun 01 '18 at 08:09

FAISAL

33,618
10
97
105

score 4 · Accepted Answer · answered Jun 01 '18 at 08:11

4

create object of date picker using ViewChild in TS as:

@ViewChild('picker') datePicker: MatDatepicker;

Use predefined method open of MatDatepicker as:

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

answered Jun 01 '18 at 08:11

Anshuman Jaiswal

5,352
1
29
46

score 2 · Answer 3 · answered Jan 29 '20 at 08:27

To those trying to get this to work on the latest version of Angular, you need to add a second argument to @ViewChild:

  @ViewChild('picker', {read: undefined, static: false}) datePicker: MatDatepicker<Date>;

And reference that object regularly in your function:

onChange(value) {
  if(value === 'someValue'){
    this.datePicker.open();
  }
}

Open angular mat-datepicker from typescript

3 Answers3