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

问题描述

我在 angular 2 中使用 Bootstrap 3.但无法从在线文档中找到任何有用的演示或示例.

当我在模板中添加时间选择器时:

<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">$(函数(){$('#datetimepicker3').datetimepicker({格式:'LT'});});

当我点击时间按钮时，没有任何反应.

解决方案

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

这样的东西可能会起作用(未测试)

@Component({选择器:'some-comp'，模板:`<div #datetimepicker></div>`})类 SomeComp {@ViewChild('datetimepicker') dateTimePicker:ElementRef;ngAfterViewInit() {$(this.dateTimePicker.nativeElement).datetimepicker({format: 'LT'});}}

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

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