Angular UI Bootstrap Datepicker not displaying

Question

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

Answer 1

In the getting started guide of the Angular UI page (https://angular-ui.github.io/bootstrap/#/getting_started), there are a couple things that need to be in place before using this module within your project:

Under the Dependencies section, it mentions:

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.

After you have these dependencies within your project, it mentions the files to download in order to use the directives available from Angular UI Bootstrap.

You can check out the following npm package, to quickly install these files into your project: https://www.npmjs.com/package/angular-ui-bootstrap

Once you have this setup, you should be able to inject the ui.bootstrap dependency to your module/app.

e.g. angular.module('ui.bootstrap.demo', ['ui.bootstrap'])

Answer 2

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