Open datepicker from outside

[ilyakrasnov]

We use the component inside a div with and have an icon next to it. I'd like to open the datepicker by clicking on the icon. Is there a way to do it like this:

<md-icon id='date_icon' (click)="datepicker.onInputClick()">date_range</md-icon>
<material-datepicker #datepicker
                     [date]="initialDate"
                     formControlName="date"
></material-datepicker>

I tried it like this so far this way and also by accessing it from the parent component - does not work in both cases.

It would be great to have an API endpoint exposing the trigger method.

Thanks a lot!

[joshuaohana]

I'm trying the same thing. I've tried all manner of playing with elementRefs to no avail

Example of stuff that doesn't work const ref = this.datepicker.elementRef; const input = ref.nativeElement.querySelector('input'); input.click(); this.datepicker.onInputClick();

[RiccardoGai]

@ilyakrasnov @joshuaohana i sorted out

<material-datepicker #datepicker [(date)]="date" (onSelect)="changeDate($event)" ></material-datepicker>
<button (click)='test($event, datepicker)'>test</button>

and on the .ts

 public test(event: Event, datepicker: any): void {
    event.stopPropagation()
    datepicker.showCalendar = !datepicker.showCalendar
  }