Угловой UT Bootstrap Datepicker не отображается

Question

Я пытаюсь интегрировать угловой ui bootstrap 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

В руководстве по началу работы с Угловым пользовательским интерфейсом (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.

Угловой-анимационный (версия должна соответствовать вашим угловым, испытанному с помощью> 1.5.8), если вы планируете использовать анимацию, вам также необходимо загрузить угловую анимацию.

Угловое касание (версия должна соответствовать вашему угловому, испытанному с 1.5.8), если вы планируете использовать действия салфетки, вам также необходимо загрузить угловое прикосновение.

Bootstrap CSS (проверено версией 3.3.7). Эта версия библиотеки (2.4.0) работает только с Bootstrap CSS в версии 3.x. 0.8.0 - последняя версия этой библиотеки, которая поддерживает Bootstrap CSS в версии 2.3.x.

После того, как у вас есть эти зависимости внутри вашего проекта, в нем упоминаются файлы для загрузки, чтобы использовать директивы, доступные из Углового пользовательского интерфейса Bootstrap.

Вы можете проверить следующий пакет NPM, чтобы быстро установить эти файлы в проект: https://www.npmjs.com/package/angular-ui-bootstrap

После этой настройки, вы должны иметь возможность вводить зависимость ui.bootstrap для вашего модуля/приложения.

например. angular.module('ui.bootstrap.demo', ['ui.bootstrap'])