Bootstrap 3 Angular 中的日期选择器 2+ 有或没有 jquery

Question

我是 Angular 2+ 的新手。我正在尝试将 Bootstrap 3 Datepicker 集成到 AngularJS2。我使用了[解决方案]：How to use Bootstrap 3 Datepicker in angular 2。但是出现了

这样的错误

Cannot find name '$'

有或没有 jquery 有什么方法可以实现任务吗？

我的代码如下。

index.html

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
 <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 <script
 src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
 integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
 crossorigin="anonymous"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>

新-job.component.html

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
   <input type='text' class="form-control" id='proposed_start_at' formControlName="proposed_start_at" #proposed_start_at/>
   <label class="mdl-textfield__label" for="proposed_start_at">Start Time</label>
</div>

新-job.component.ts

@ViewChild("proposed_start_at")
public startDateElementRef: ElementRef;

ngAfterViewInit() {
    $(this.startDateElementRef.nativeElement).datetimepicker({format: 'LT'});
}

我想实现 [link] 中给出的日期时间选择器：https://eonasdan.github.io/bootstrap-datetimepicker/

Answer 1

您需要添加：declare var $:any;

declare var $: any;

@Component({
    ...
})

确保您的库中包含所有必需的库：

npm install jquery bootstrap moment eonasdan-bootstrap-datetimepicker--save

然后在angular-cli.json

"styles": ["../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"],
"scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/bootstrap/dist/js/bootstrap.js",
      "../node_modules/moment/moment.js",
      "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
      ...

而且您不需要在 index.html

的脚本标签中添加这些

Bootstrap 3 Angular 中的日期选择器 2+ 有或没有 jquery

Bootstrap 3 Datepicker in Angular 2+ with or without jquery

jquery

twitter-bootstrap-3

bootstrap-datetimepicker

angular