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?

you want to use datePIcker in angular2 ? i have another custom date picker if you want ill post it as answer. — Pardeep Jain, Mar 17 '16 at 08:41
@PardeepJain I would really like to see the picker if you like :) — DNRN, Mar 17 '16 at 08:48

score 4 · Accepted Answer · edited May 23 '17 at 11:47

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

score 0 · Answer 2 · answered Nov 30 '16 at 15:41

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);
}

How to use bootstrap/jquery in Angular2

2 Answers2