uib-datepicker-popupにカレンダーが表示されない

Question

私はExpressとAngularJSを使用しています。私はui-bootstrapモジュールで日付ピッカーを追加しようとしました。 uib-datepickerを追加するとうまくいきます。私はUIB-DatePickerの - ポップアップを追加しようとしたとき、私はカレンダーのボタンをクリックすると、結果がその

uib-datepicker-popup

のようだった。しかし、それはポップアップを示すが、はっきりと閉じるボタンは、今日だけです。カレンダーは表示されません。事前にhttps://angular-ui.github.io/bootstrap/

ありがとう：

はここでここで私は、コードを取るドキュメントがある私のhtml

<div ng-controller="DatepickerPopupDemoCtrl"> 
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> 


    <div class="col-md-6"> 
    <p class="input-group"> 
     <input type="text" uib-datepicker-popup class="form-control" 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> 
    </div> 
</div> 

とコントローラ

app.controller('DatepickerPopupDemoCtrl', function ($scope) { 


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

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

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


    $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(); 

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

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

    $scope.format = 'yyyy-MM-dd'; 
    $scope.altInputFormats = ['M!/d!/yyyy']; 

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

です。

Answer 1

jade with angularjsを使用する必要があります。 日付ピッカー、ポップアップを追加したい場合は、あなたがHTML

<input type="text" uib-datepicker-popup="" name="dob" placeholder="Please enter date in YYYY-mm-dd format" 
    ng-model="dob" is-open="popup2.opened" datepicker-options="dateOptions" 
    ng-required="true" close-text="Close" class="form-control"/> 
<span class="input-group-btn"> 
    <button type="button" ng-click="open2()" class="btn btn-default"> 
    <i class="glyphicon glyphicon-calendar"></i> 
    </button> 
</span> 

ため 下のコードを使用して、コントローラであなたのCSSファイルで

$scope.dateOptions = { 
    formatYear: 'yy', 
    maxDate: new Date(2020, 5, 22), 
    minDate: new Date(1970, 1, 1), 
    startingDay: 1 
}; 
$scope.open = function() { 
    $scope.popup.opened = true; 
}; 
$scope.popup = { 
    opened: false 
}; 
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 ''; 
} 

この

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

これを追加することができます

Answer 2

私の場合、プロジェクトではnpm（またはbower）を使用していませんでした。したがって、次のファイル（hereからダウンロードしたファイル）をパスに手動で配置して、uib-datepicker-popupを使用した日付でカレンダーポップアップを作成する必要がありました。

WebPages 
L___uib 
    L___template 
     L____datepicker 
      L____datepicker.html 
      L____day.html 
      L____month.html 
      L____year.html 
     L____datepickerPopup 
      L____poup.html