Angular.ui Datepickerを使用している日付が表示されません

Question

Datepickerポップアップを実装しようとしています。 Hereと表示されているように、私は始動ページの例を使用しています。カレンダーアイコンをクリックすると、ポップアップが表示されますが、日付はありません。ちょうど左右の矢印で、このエラーが発生します。

私は他のすべてのディレクティブをテストしていませんが、私が試したもの（ツールチップ、カルーセルなど）はすべて動作します。ここで

は、私は、ドキュメントから使用されるマークアップである：ここでは

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

は、私はドキュメントサイトから使用JSである：ここでは

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

は、コンソールのエラーです：

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

jQueryも参照しているというコンソールエラーが表示されます。 の前にjQueryが参照されていることを確認してからを参照すると、jqLit​​eの代わりにjQueryの利点がすべて得られます。

あなたが提供したコードを使用してモックモジュール、コントローラ、ビューを作成しました。私はjQuery、Angular、Angular UIの通常の参照順序を使用しました。しかし、Angularの後にjQueryを配置する順序を変更したとき、datepickerにはちょうど少数のボタンがあり、日付は表示されませんでした。

Answer 2

私はこの例を試してみました。そして、私はあなたのコードおよびログを経た後、いくつかのヒント/チェックポイントは以下の通りです：

1）UIのブートストラップもUI-ブートストラップ・tpls.js前にすべきである（角-アニメーションによって異なります）

チェックポイントは、上記の問題が解決しない場合は

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

最後に、あなたがの完全なソースコード（HTMLとJavaScriptファイル）を取得したい場合があります2）モジュールの依存関係は、以下にサンプルとして追加する必要がありますサンプルの右側に「プランナーで編集」をクリックしてくださいサンプルコード。次に、実行可能なサンプルコードとコードの正確な違いを比較することができます。