Comment indiquer à l'élément ng2-eonasdan-datetimepicker d'afficher le calendrier?

Question

J'utilise le datetimepicker de 'ng2-eonasdan-datetimepicker' qui fonctionne bien. Mais j'ai un autre contrôle et voudrais ouvrir le calendrier lorsque l'autre contrôle est cliqué.

J'ai essayé plusieurs choses, et la dernière:

export class Item { 
    @ViewChild('datetimepicker') datetimepickerElement: ElementRef; 

    ... 

    public showDate() { 
    let event = new MouseEvent('click', {bubbles: true}); 
    this.datetimepickerElement.nativeElement.dispatchEvent(event); 
    } 

    public getDueDate(): moment { 
    return ... 
    } 

} 

où le fragment html correspondant est:

 <input #datetimepicker 
     type='text' 
     class="form-control" 
     a2e-datetimepicker 
     [date]="getDueDate()" 
     [options]="datetimepicker_options" 
     style="opacity: 0; maxlength: 4; height: 30px; width: 100px;" 
     (onChange)="dateToChange($event)" 
     /> 

Pourtant, cela n'ouvre pas le calendrier associé du a2e-DateTimePicker.

J'ai cherché haut et bas essayant d'accéder directement au a2e-datetimepicker sans succès. Avez-vous une idée de comment faire cela? Ou pourquoi le dispatchEvent ou même un nativeElement.click() n'atteignent pas le a2e-datetimepicker?

Merci !!!

Answer 1

Il s'avère que ce dont j'avais besoin ici était d'appeler focus(). Comme si:

public showDate() { 
    this.datetimepickerElement.nativeElement.focus(); 
} 

J'ai aussi appris comment accéder à la directive sous-jacente comme ceci:

import { DateTimePickerDirective } from '../../../../../node_modules/ng2-eonasdan-datetimepicker/dist/datetimepicker.directive'; 

    @ViewChild(DateTimePickerDirective) datetimempickerDirective; 

Et peut alors faire:

this.datetimempickerDirective.dpElement[0].focus(); 

mais cela fait la même chose dans ce cas le plus facile

this.datetimepickerElement.nativeElement.focus(); 

Nous espérons que cela aidera somelse qui est encore en train d'apprendre angulaire2.