Angular 2+的Bootstrap TimePicker格式

Question

我正在使用 Angular4 / Bootstrap4 ，并且我尝试使用 dateTimePicker 格式> Angular 但在文档中我发现只有JQuery方式！

room.component.html：

  <div class="form-group row">
      <label for="timepicker" class="col-2 col-form-label">Time</label>
      <div class="col-10">
        <input class="form-control" type="time" value="13:45" #timepicker id="timepicker">
      </div>      
  </div>

JQuery Solution（doc）：

$('#datetimepicker5').datetimepicker({
    use24hours: true
});

我正在将此解决方案从JQuery转换为Angular2 + ，但它不起作用！

room.component.ts：

@ViewChild('timepicker') private timepicker;

ngOnInit() {
    this.timepicker.datetimepicker({
      use24hours: true
    });
}

Answer 1

我相信你仍然必须在你提供的这个例子中使用jQuery。您需要将DOM元素包装在组件中的jQuery对象中。然后，您将能够调用datetimepicker插件方法。

＆＃13;

＆＃13;

cardType=(?<Card Type>.*?)&

＆＃13;

＆＃13;

＆＃13;

Angular中更多的jQuery方式是：

//declare jQuery in component
declare var $: any;

ngOnInit() {
    $(this.timepicker).datetimepicker({
      use24hours: true
    });
}