如何在Angle 2中使用Bootstrap 3 Datepicker [英] How to use Bootstrap 3 Datepicker in angular 2

问题描述

我正在角度2中使用Bootstrap3.但是找不到任何有用的演示或在线文档中的示例.

I am using Bootstrap 3 in the angular 2. But can't find any helpful demo or examples from online docs.

当我在模板中添加时间选择器时，如下所示:

When I add time picker in the template as following:

<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 click the time button, there is no response.

推荐答案

脚本标签已从模板中删除.您需要使用其他方式来加载脚本.

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

类似的方法可能有效(未经测试)

Something like this might work (not tested)

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

这篇关于如何在Angle 2中使用Bootstrap 3 Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！