如何在 Angular2 中使用 bootstrap/jquery答案

【问题标题】：How to use bootstrap/jquery in Angular2如何在 Angular2 中使用 bootstrap/jquery
【发布时间】：2016-07-03 08:54:14
【问题描述】：

如何在 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();
    }

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

【问题讨论】：

你能提供一个plunker吗？
$(elm).datetimepicker(); 怎么样？
你想在 angular2 中使用 datePIcker 吗？如果您想将其发布为答案，我还有另一个自定义日期选择器。
@PardeepJain 如果你愿意，我真的很想看看选择器 :)
@DNRN 我已经发布了答案，请查看。

标签： jquery twitter-bootstrap-3 angular

【解决方案1】：

与其发表评论，我更愿意将其发布为答案（根据@DNRN 的要求），因为它可能对将来的其他人有所帮助。

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

这里有一些关于 datepicker 的更多最佳文章/库

【讨论】：

【解决方案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);
}

【讨论】：