如何在角度2中使用Bootstrap 3 Datepicker

发布时间：2020-12-17 21:26:22 所属栏目：安全来源：网络整理

导读：我在角度2中使用Bootstrap 3.但是无法从在线文档中找到任何有用的演示或示例. 当我在模板中添加时间选择器时如下： div class='input-group date' id='datetimepicker3' input type='text' class="form-control" #datePicker [ngModel]="f.ArrivalTime" (blu

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

当我在模板中添加时间选择器时如下：

<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>

当我单击时间按钮时,没有响应.

解决方法

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

这样的东西可能有效(未经测试)

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!