Question

我是Angular和bootstrap的新手，目前正在尝试实现一个bootstrap datepicker。我找到了一个很好的资源：“https://angular-ui.github.io/bootstrap/” 但是我似乎无法让选择器在屏幕上呈现。如果我将uib-datepicker放在控制器div之外的div元素中，则会呈现选择器。

我的标记中是否有错误我无法看到，或者我在这里失踪了什么？

我很欣赏有关此主题的任何指导。请在下面找到我的项目。

<!-- index.html    -->
<html ng-app="app"> 
<head>
    <title>Angular Bootstrap and Animation</title>
         <link rel="stylesheet" 
               href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
               integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
               crossorigin="anonymous">
</head>

<body>
    <div class="container">
    <div ng-controller="DatePickerCtrl">    
            <pre>Selected date: <em>{{dt | date:'fullDate' }}</em></pre>
            <h4>CALENDER</h4>
            <div style="display:inline-block; min-height:200px;">                                                
            <div uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options"></div>

            <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
            <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
            <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
            <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
    </div>
    </div>      

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="./app/app.js"></script>
<script src="./app/DatePickerCtrl.js"></script>
</body>
</html>




<!-- DatePickerCtrl.js    --> 
   angular.module('app')
.controller('DatePickerCtrl', 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: false
    };

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

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

    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date(tomorrow);
    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 '';
    }
});


<!-- app.js    -->
angular.module('app', ['ui.bootstrap', 'ngAnimate']);

为什么bootstrap.datepicker不呈现？

0 个答案: