AngularJS中datetimepicker无法打开的技术求助

嘿，我看了你贴的代码，发现几个很容易踩的坑，这应该就是你的datetimepicker弹不出来的原因，咱们一步步来解决：

先揪出几个明显的问题 #

• 重复的ID：你给input和span都加了id="mypicker"，HTML里ID是全局唯一的，重复的话会导致JS找不到正确的元素，直接影响组件触发逻辑。
• 组件库混用：你引入的是bootstrap-datepicker的CSS，但Angular模块里依赖的是ui.bootstrap.datepicker——这俩是完全不同的组件！一个是jQuery驱动的Bootstrap插件，另一个是Angular UI团队封装的原生Angular组件，资源和模块不匹配肯定出问题。
• 缺失关键依赖：你在app里声明了ui.bootstrap依赖，但没引入它的JS文件，这就像买了零件没装螺丝，组件根本跑不起来。

解决方案分两种，选适合你的就行 #

方案一：用Angular UI Bootstrap的Datepicker（推荐，因为你已经加了这个依赖）

这个是纯Angular实现的，不需要额外的jQuery插件，步骤如下：

1. 补全依赖文件：在你的script列表里加上ui.bootstrap的JS（注意版本要和你用的Bootstrap匹配）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>

2. 修正app.js的模块依赖：ui.bootstrap已经包含了datepicker模块，不需要单独加ui.bootstrap.datepicker，所以改成：

var app = angular.module('ToDoApp', ['ui.router', 'ui.bootstrap', 'ngSanitize']);

3. 重写HTML代码：用ui.bootstrap的uib-datepicker-popup指令，同时去掉重复ID：

<div class="input-group">
  <input type="text" class="form-control" 
         uib-datepicker-popup="yyyy/MM/dd hh:mm a" 
         ng-model="note.remainder" 
         is-open="pickerIsOpen" 
         ng-click="pickerIsOpen = true" />
  <span class="input-group-addon" ng-click="pickerIsOpen = !pickerIsOpen">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

4. 在控制器里初始化开关变量：

app.controller('YourTodoController', function($scope) {
  // 控制日历弹窗的显示/隐藏
  $scope.pickerIsOpen = false;
});

方案二：坚持用bootstrap-datepicker（jQuery-based）

如果你非要用这个组件，就得把资源和模块配全：

1. 补全JS文件：除了现有的，还要加bootstrap-datepicker的JS和它的Angular封装模块：

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datepicker/0.2.2/angular-bootstrap-datepicker.min.js"></script>

2. 修正app.js的模块依赖：加上封装的datepicker模块：

var app = angular.module('ToDoApp', ['ui.router', 'ui.bootstrap', 'ngSanitize', 'datepicker']);

3. 修正HTML的重复ID：

<div class="input-group date" data-date-format="YYYY/MM/DD hh:mm AM/PM">
  <input id="mypicker-input" class="form-control" type="text" placeholder="" ng-model="note.remainder"/>
  <span class="input-group-addon" ng-click="$('#mypicker-input').datepicker('show')">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

4. 在控制器里初始化组件：

app.controller('YourTodoController', function($scope) {
  // 初始化datepicker
  $('#mypicker-input').datepicker();
});

最后再提几个小提醒 #

• 日期格式的语法要对应组件：ui.bootstrap用的是Angular原生的日期过滤器格式（比如yyyy不是YYYY），bootstrap-datepicker用的是自己的格式规则，别写错了。
• 尽量避免Angular和jQuery混用操作DOM，用方案一的纯Angular方式更符合框架规范，也不容易出奇怪的问题。

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