I'm trying to integrate the angular ui bootstrap datepicker into my project, but I can't get the calendar dropdown to display in my code. The buttons and label display but the calendar just shows as a line (jsfiddle below)
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>
Even without making any changes, just copying the code I can't get it to display correctly. I also checked and I have ui.boostrap included in my repo https://github.com/angular-ui/bootstrap/tree/master/src/datepicker/docs
I answered what fixed it in a comment above but putting it in answer form here:
The name of my directive was "datetimePicker" which will translate to a tag that is <datetime-picker></datetime-picker>
and my tag in my index.html was <date-time-pickerl><date-time-picker>
keeping it from displaying properly. I found the answer in the stack overflow question linked below: