Angular 4中Bootstrap-datepicker Sandbox无法触发的问题求助

看起来你在Angular 4里集成bootstrap-datepicker时遇到了弹出不显示的问题，我帮你梳理几个关键问题和修复方案：

1. 脚本加载顺序错误 #

你的HTML里先加载了Bootstrap，再加载jQuery，但Bootstrap和bootstrap-datepicker都依赖jQuery，必须先加载jQuery，再加载其他依赖它的脚本。修正后的HTML资源加载顺序应该是这样：

<!-- Main jQuery 先加载jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Bootstrap 依赖jQuery，所以放在jQuery之后 -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- bootstrap-datepicker 同样依赖jQuery -->
<script src="./assets/libs/datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- 样式文件顺序可以保持不变 -->
<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker3.standalone.min.css">

<div class="input-group date" id="datepicker-container">
  <input type="text" class="form-control">
  <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

2. Angular生命周期钩子时机不对 #

在Angular组件里直接写jQuery选择器初始化，可能会遇到DOM还未完全渲染完成的情况，导致选择器找不到元素。你需要在ngAfterViewInit钩子中执行初始化逻辑，这个钩子会在组件视图及其子视图都渲染完成后触发：

import { Component, AfterViewInit } from '@angular/core';
// 如果TypeScript报错找不到$，需要先安装jQuery类型定义：npm install @types/jquery --save-dev
declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 注意选择器要和HTML里的元素匹配，我给div加了id方便选择，你也可以用类选择器
    $('#datepicker-container').datepicker({
      startDate: "-12/30/2014",
      endDate: "+01/15/2015",
      startView: 1,
      clearBtn: true,
      calendarWeeks: true,
      autoclose: true,
      todayHighlight: true
    });
  }
}

3. 选择器匹配问题 #

你原来的代码里用了$('#sandbox-container .input-group.date')，但你的HTML里并没有sandbox-container这个父元素，所以选择器找不到目标元素。要么给父容器加上这个类/ID，要么调整选择器为实际存在的元素（比如我上面给div加了datepicker-container的ID）。

额外注意事项 #

• 建议使用较新版本的jQuery，1.7.1比较老旧，可能和Angular 4或者新版本的bootstrap-datepicker存在兼容性问题，比如换成3.x版本的jQuery。
• 如果你的Angular项目是用CLI创建的，更规范的做法是通过npm安装jQuery、bootstrap和bootstrap-datepicker，然后在angular.json里配置脚本和样式，而不是直接在HTML里引入CDN或本地文件。

内容的提问来源于stack exchange，提问作者user9192087