Keine Daten zeigen mit Angular.ui Datepicker

Question

Ich versuche, das Datepicker Popup zu implementieren. Ich benutze das Beispiel auf der Einstiegsseite wie gesehen Here. Wenn ich auf das Kalendersymbol klicke, wird das Popup angezeigt, aber es gibt keine Daten, nur linke und rechte Pfeile und ich erhalte diesen Fehler.

Ich habe nicht alle anderen Direktiven getestet, aber alle, die ich versucht habe (Tooltip, Karussell, etc.) funktionieren. Hier

ist das Markup ich aus der Dokumentation verwendet:

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

Hier ist die JS ich aus der doc-Website verwendet:

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

Hier ist die Konsole Fehler:

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}}"> 

Answer 1

Ich sehe von Ihrer Konsole Fehler, dass Sie auch auf jQuery verwiesen haben. Stellen Sie sicher, dass jQuery auf verwiesen wird, bevor Sie referenzieren, so dass Sie den vollen Nutzen von jQuery anstelle von jqLite erhalten.

Ich habe ein Mock-Modul, Controller und Ansicht mit dem Code, den Sie zur Verfügung gestellt und es funktionierte perfekt für mich. Ich verwendete meine übliche Referenzreihenfolge von jQuery, Angular und dann Angular UI. Als ich jedoch die Reihenfolge änderte, um jQuery nach Angular zu platzieren, hatte der Datapicker nur ein paar Knöpfe und keine Daten, die so ähnlich sind, wie du es beschreibst.

Answer 2

Ich habe das Beispiel versucht und es funktioniert. Und nachdem ich durch den Code ging und Protokolle, ein paar Tipps/Check Punkte sind unten:

1) UI Bootstrap hängt auch von Winkel belebten (soll vor ui-Bootstrap-tpls.js)

2) Modulabhängigkeiten sollten auch als Probe unten angefügt:

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

Schließlich, wenn die Kontrollpunkte über das Problem nicht beheben, können Sie die vollständigen Quelltexte (hTML und JavaScript-Dateien) von der erhalten möchten Probe durch Klicken auf "Edit in Plunker" auf der rechten Seite von der Beispielcode Dann können Sie den genauen Unterschied zwischen dem bearbeitbaren Beispielcode und Ihrem Code vergleichen.