如何在Angular2中使用bootstrap / jquery

Question

在Angular2中使用像Eonasdan / bootstrap-datetimepicker这样的引导插件的最佳方法是什么？

我在我的设置中使用了jspm并安装了Eonasdan / bootstrap-datetimepicker。我在我的组件中包含了javascript：

import { datepicker } from 'Eonasdan/bootstrap-datetimepicker';

在AfterViewInit中，我试图将.datetimepicker（）添加到html元素中，如下所示：

ngAfterViewInit() {
      var elm = <HTMLDivElement>document.getElementById('datetimepicker1');
      elm.datetimepicker();
    }

但这不起作用。我该如何解决这个问题？

Answer 1

我不想发表评论，而是将其发布为答案（由@DNRN要求），因为它可能对将来的其他人有所帮助。

您无需导入任何额外文件即可测试解决方案，我已使用datepicker组件和bootflat作为样式框架以及date picker library在线发布了解决方案，或者您可以获取更多信息{{3} } ...

refer to this link

以下是针对datepicker的更多最佳文章/库

• 
• https://github.com/kekeh/mydatepicker
• https://github.com/jkuri/ng2-datepicker

Answer 2

我刚刚在Angular 2中为Eonasdan/bootstrap-datetimepicker创建了一个指令：https://github.com/atais/ng2-eonasdan-datetimepicker

目前处于非常早期阶段，但希望它能满足您的要求。

关于你的问题，我已经设法在jQuery的帮助下实例化日历元素：

import * as $ from 'jquery';

constructor(el: ElementRef, renderer: Renderer) {
    let $parent = $(el.nativeElement.parentNode);
    this.dpElement = $parent.hasClass('input-group') ? $parent : $(el.nativeElement);
}

ngOnInit(): void {
    this.dpElement.datetimepicker(this.options);
    this.dpElement.data('DateTimePicker').date(this.date);
}