How to use Bootstrap 3 Datepicker in angular 2

Question

I am using Bootstrap 3 in angular 2. But I cannot find a useful demo or examples from online docs.

When I add the timing in the template as follows:

<div class='input-group date' id='datetimepicker3'>
    <input type='text' class="form-control" #datePicker [ngModel]="f.ArrivalTime" (blur)="date = datePicker.value" />
      <span class="input-group-addon">
      <span class="glyphicon glyphicon-time"></span>
      </span>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        </script>
</div>

When I press the time button, there is no answer.

Answer 1

Tags

Script are removed from the templates. You need to use other means to load the script.

Something like this might work (not verified)

@Component({
  selector: 'some-comp',
  template: `<div #datetimepicker></div>`
})
class SomeComp {
  @ViewChild('datetimepicker') dateTimePicker:ElementRef;
  ngAfterViewInit() {
    $(this.dateTimePicker.nativeElement).datetimepicker({format: 'LT'});
  }
}

Answer 2

You can use ui-bootstrapfor angular 2.

This is done by the angular team, which I believe, and they provide bootstrap directives for angular 1 and 2.