Angular UI Bootstrap 日期选择器不显示

Question

我正在尝试将 angular ui bootstrap 日期选择器集成到我的项目中，但我无法在我的代码中显示日历下拉菜单。按钮和标签显示，但日历仅显示为一行（下面的 jsfiddle）

JSFiddle：https://jsfiddle.net/caraclarke/umwkt39j/

JS:

 angular.module('ui.bootstrap').controller('DatepickerDemoCtrl', function ($scope) {
 $scope.today = function() {
  $scope.dt = new Date();
};
$scope.today();

 $scope.clear = function() {
 $scope.dt = null;
};

$scope.options = {
 customClass: getDayClass,
 minDate: new Date(),
 showWeeks: true
};

function getDayClass(data) {
 var date = data.date,
   mode = data.mode;
  if (mode === 'day') {
   var dayToCheck = new Date(date).setHours(0,0,0,0);

   for (var i = 0; i < $scope.events.length; i++) {
     var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

     if (dayToCheck === currentDay) {
       return $scope.events[i].status;
      }
     }
    }

    return '';
  }
});

HTML:

<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

<h4>Inline</h4>
<div>
  <div uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options"></div>
</div>

<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
</div>

即使不做任何更改，只是复制代码我也无法使其正确显示。我也检查过，我的回购 https://github.com/angular-ui/bootstrap/tree/master/src/datepicker/docs

中包含 ui.boostrap

Answer 1

在 Angular UI 页面 (https://angular-ui.github.io/bootstrap/#/getting_started) 的入门指南中，在您的项目中使用此模块之前需要准备好几件事：

在 Dependencies 部分下，它提到：

The only required dependencies are:

AngularJS (requires AngularJS 1.4.x or higher, tested with 1.5.8). 0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.

Angular-animate (the version should match with your angular's, tested with >1.5.8) if you plan in using animations, you need to load angular-animate as well.

Angular-touch (the version should match with your angular's, tested with 1.5.8) if you plan in using swipe actions, you need to load angular-touch as well.

Bootstrap CSS (tested with version 3.3.7). This version of the library (2.4.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

在项目中拥有这些依赖项后，它会提到要下载的文件，以便使用 Angular UI Bootstrap.

中可用的指令

您可以查看以下 npm 包，将这些文件快速安装到您的项目中：https://www.npmjs.com/package/angular-ui-bootstrap

完成此设置后，您应该能够将 ui.bootstrap 依赖项注入 module/app。

例如angular.module('ui.bootstrap.demo', ['ui.bootstrap'])

Answer 2

我在上面的评论中回答了是什么修复了它，但把它放在这里的答案形式中：

我的指令的名称是 "datetimePicker"，它将转换为 <datetime-picker></datetime-picker> 的标签，而我的 index.html 中的标签是 <date-time-pickerl><date-time-picker> 使其无法正常显示.我在下面链接的堆栈溢出问题中找到了答案：

AngularJS directive not displaying the template

Angular UI Bootstrap 日期选择器不显示

Angular UI Bootstrap Datepicker not displaying

datepicker

angularjs

angular-ui

angular-bootstrap