How to use bootstrap/jquery in Angular2

Question

How is the best way to use a bootstrap plugin like Eonasdan/bootstrap-datetimepicker in Angular2?

I use jspm in my setup and have installed Eonasdan/bootstrap-datetimepicker. The I include the javascript in my Component:

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

In AfterViewInit I have tried to add the .datetimepicker() to the html element like this:

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

But this is not working. How can I solve this issue?

Answer 1

Instead of leaving a comment I prefer to post this as answer (as demanded by @DNRN) because it may helpful to someone else in the future.

You test the solution without having to import any extra files, I have posted a solution online using the datepicker component and bootflat as a styling framework as well as a date picker library or for more info you can refer to this link...

Here are few More best articles/libraries for datepicker

• https://github.com/kekeh/mydatepicker
• https://github.com/jkuri/ng2-datepicker
• http://www.primefaces.org/primeng/#/calendar

Answer 2

I have just created a directive for Eonasdan/bootstrap-datetimepicker in Angular 2: https://github.com/atais/ng2-eonasdan-datetimepicker

It is currently in very early stages but hopefully it should meet your requirements.

Regarding your question, I have managed to instantiate the calendar element with the help of 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);
}