Search code examples
angularjsdatepickerangular-uiangular-bootstrap

Angular UI Bootstrap Datepicker not displaying


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


Solution

  • 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:

    AngularJS directive not displaying the template