Question

我正在使用＆＃39; ng2-eonasdan-datetimepicker＆＃39;中的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的人。

如何告诉ng2-eonasdan-datetimepicker元素显示日历？

1 个答案: