Angular UI Bootstrap日期选择器不显示

Question

我正在尝试将角度ui引导程序datepicker集成到我的项目中，但我无法获取日历下拉列表以显示在我的代码中。按钮和标签显示，但在日历只是显示为一条线（的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> 

即使没有进行任何更改，只是复制代码，我无法让它正确显示。我也查了，我已经ui.boostrap包含在我的回购https://github.com/angular-ui/bootstrap/tree/master/src/datepicker/docs

Answer 1

我回答什么固定它上面的注释，但把它回答的形式在这里：

我的指令是“dateTimePicker的”的，这将转化为一个标签是<datetime-picker></datetime-picker>的名字和我的标签在我的索引.html是<date-time-pickerl><date-time-picker>使其无法正常显示。我发现，在堆栈溢出问题的答案链接如下：

AngularJS directive not displaying the template

Answer 2

在角UI页面（https://angular-ui.github.io/bootstrap/#/getting_started），有需要在地方使用您的项目中该模块之前，有两件事情的入门指南：

根据依赖部分，它提到：

唯一需要的依赖关系是：

AngularJS（需要AngularJS 1.4.x或更高版本，用1.5.8测试）。 0.14.3是该库支持AngularJS 1.3.x的最后一个版本，0.12.0是支持AngularJS 1.2.x的最后一个版本。

Angular-animate（该版本应该与您的角度匹配，用> 1.5.8进行测试）如果您计划使用动画，则还需要加载角动画。

角度触摸（该版本应该与您的角度匹配，用1.5.8测试）如果您计划使用滑动操作，则还需要加载角度触摸。

Bootstrap CSS（使用版本3.3.7进行测试）。该版本的库（2.4.0）仅适用于版本3.x中的Bootstrap CSS。 0.8.0是此库的最后一个版本，它支持版本2.3.x中的Bootstrap CSS。

之后，你有你的项目中这些依赖关系，它提到的文件，以便使用从角UI引导的指示进行下载。

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

一旦你有这样的设置，你应该能够注入ui.bootstrap依赖于你的模块/应用程序。

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