如何告訴ng2-eonasdan-datetimepicker元素顯示日曆？

Question

我使用'ng2-eonasdan-datetimepicker'的datetimepicker，它運行良好。但我有另一個控件，並打開日曆時點擊另一個控件。

我已經試過幾件事情，而最新的：

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 ... 
    } 

} 

如有關HTML片段是：

 <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)" 
     /> 

但這並不打開A2E-的DateTimePicker的相關聯的日曆。

我試圖直接訪問a2e-datetimepicker而沒有成功，你有一個想法如何做到這一點？或者爲什麼dispatchEvent甚至nativeElement.click（）沒有達到a2e-datetimepicker？

謝謝！

Answer 1

事實證明，我需要的是調用focus（）。像這樣：

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

我也學會了如何訪問底層的指令是這樣的：

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

    @ViewChild(DateTimePickerDirective) datetimempickerDirective; 

然後可以做：

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

但確實在這種情況下，以相同更容易

this.datetimepickerElement.nativeElement.focus(); 

這將有助於仍然在學習angular2的某些人。