No dates showing using Angular.ui Datepicker

Question

I'm trying to implement the Datepicker popup. I'm using the example on the getting-started page as seen Here. When I click on the calendar icon the popup shows but there are no dates, Just left and right arrows and I get this error.

I haven't tested all the other directives, but all the ones I have tried (tooltip, carousel, etc.) work.

Here is the markup I used from the docs:

 <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

Here is the JS I used from the doc site:

$scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function() {
    $scope.dt = null;
  };

  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    startingDay: 1
  };

  // Disable weekend selection
  function disabled(data) {
    var date = data.date,
      mode = data.mode;
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
  }

  $scope.toggleMin = function() {
    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
  };

  $scope.toggleMin();

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };

  $scope.open2 = function() {
    $scope.popup2.opened = true;
  };

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
  $scope.altInputFormats = ['M!/d!/yyyy'];

  $scope.popup1 = {
    opened: false
  };

  $scope.popup2 = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  $scope.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

  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 '';
  }

Here is the console error:

Empty string passed to getElementById(). /
Error: date1 is undefined
this.compare@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2424:9
this.createDateObject@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2171:28
this._refreshView@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2414:34
this.refreshView@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2138:7
this.init@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2403:5
.link@http://localhost:3000/lib/angular-bootstrap/ui-bootstrap-tpls.js:2563:7
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
delayedNodeLinkFn@http://localhost:3000/lib/angular/angular.js:9380:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
boundTranscludeFn@http://localhost:3000/lib/angular/angular.js:8350:16
controllersBoundTransclude@http://localhost:3000/lib/angular/angular.js:9072:20
ngSwitchWatchAction/<@http://localhost:3000/lib/angular/angular.js:29434:13
forEach@http://localhost:3000/lib/angular/angular.js:321:11
ngSwitchWatchAction@http://localhost:3000/lib/angular/angular.js:29433:11
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16869:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
ngEventHandler/<@http://localhost:3000/lib/angular/angular.js:24813:17
m.event.dispatch@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8497
m.event.add/r.handle@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5235
EventListener.handleEvent*m.event.add@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5723
.on/<@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:15011
.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2973
m.prototype.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:833
.on@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:14990
ngEventHandler@http://localhost:3000/lib/angular/angular.js:24806:13
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9017:24
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9017:24
delayedNodeLinkFn@http://localhost:3000/lib/angular/angular.js:9380:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
boundTranscludeFn@http://localhost:3000/lib/angular/angular.js:8350:16
controllersBoundTransclude@http://localhost:3000/lib/angular/angular.js:9072:20
ngSwitchWatchAction/<@http://localhost:3000/lib/angular/angular.js:29434:13
forEach@http://localhost:3000/lib/angular/angular.js:321:11
ngSwitchWatchAction@http://localhost:3000/lib/angular/angular.js:29433:11
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16869:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
ngEventHandler/<@http://localhost:3000/lib/angular/angular.js:24813:17
m.event.dispatch@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8497
m.event.add/r.handle@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5235
EventListener.handleEvent*m.event.add@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5723
.on/<@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:15011
.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2973
m.prototype.each@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:833
.on@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:14990
ngEventHandler@http://localhost:3000/lib/angular/angular.js:24806:13
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9017:24
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8336:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
$ViewDirectiveFill/<.compile/<@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4089:9
invokeLinkFn@http://localhost:3000/lib/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/lib/angular/angular.js:8213:30
lazyCompilation@http://localhost:3000/lib/angular/angular.js:8551:16
updateView@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:4021:23
$ViewDirective/directive.compile/</<@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:3959:11
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:3000/lib/angular/angular.js:17348:15
transitionTo/$state.transition<@http://localhost:3000/lib/angular-ui-router/release/angular-ui-router.js:3352:11
processQueue@http://localhost:3000/lib/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/lib/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/lib/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
done@http://localhost:3000/lib/angular/angular.js:11454:36
completeRequest@http://localhost:3000/lib/angular/angular.js:11652:7
requestLoaded@http://localhost:3000/lib/angular/angular.js:11593:9
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/lib/angular/angular.js:11576:7
sendReq@http://localhost:3000/lib/angular/angular.js:11423:9
$http/serverRequest@http://localhost:3000/lib/angular/angular.js:11133:16
processQueue@http://localhost:3000/lib/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/lib/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/lib/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/lib/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/lib/angular/angular.js:17133:13
bootstrapApply@http://localhost:3000/lib/angular/angular.js:1713:9
invoke@http://localhost:3000/lib/angular/angular.js:4625:16
bootstrap/doBootstrap@http://localhost:3000/lib/angular/angular.js:1711:5
bootstrap@http://localhost:3000/lib/angular/angular.js:1731:12
init@http://localhost:3000/modules/core/client/app/init.js:43:5
m.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:27304
m.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:28122
.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:29954
J@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:30320
EventListener.handleEvent*m.ready.promise@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:30456
m.fn.ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:29706
m.fn.init@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:24733
m@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:393
@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:30891
@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:207
@http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:2:2
 <table data-ng-animate="1" ng-switch-when="month" tabindex="0" class="uib-monthpicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">

Please include some code and not just a big block of console error — Alon Eitan, Apr 15 '16 at 21:56

score 1 · Accepted Answer · answered Apr 19 '16 at 05:33

1

I see from your console errors that you've also referenced jQuery. Make sure jQuery is referenced before you reference Angular so you get the full benefit of jQuery instead of jqLite.

I made a mock module, controller and view using the code you provided and it worked perfectly for me. I usued my usual reference order of jQuery, Angular and then Angular UI. However, when I changed the order to put jQuery after Angular, the datepicker just had a few buttons and no dates much like you're describing.

answered Apr 19 '16 at 05:33

BJ Zimpleman

51
4

This is the order I had the assets. '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', 'public/lib/jquery-ui/jquery-ui.js', 'public/lib/angular/angular.js' – Jared L Cowan Apr 19 '16 at 17:14
What versions of jQuery UI and Angular are you using? – BJ Zimpleman Apr 21 '16 at 01:19

score 0 · Answer 2 · edited Apr 27 '16 at 10:26

I tried the example and it works. And after I went through your code and logs, a few tips/check points are below:

1) UI bootstrap also depends on angular-animate (should before ui-bootstrap-tpls.js)

2) Module dependencies should also be added as the sample below:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { ............

Finally, if the check points above do not fix your issue, you may want to get the full source codes (html and javascript files) of the sample by clicking "Edit in plunker" on the right side of the sample code. Then you're able to compare what is the exact difference between the workable sample code and your code.

No dates showing using Angular.ui Datepicker

2 Answers2