Question

我正试图让http://angular-ui.github.io/bootstrap找到的ui.bootstrap.datepicker控件在jsfiddle中工作：

http://jsfiddle.net/edwardtanguay/oqo2xv3e/7

我已将HTML缩小为一个输入和按钮：

<div ng-app="mainApp">
    <div ng-controller="mainController">  
        <div class="col-sm-12">
            <div>[{{message}}]</div>

            <input type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="bootstrapdatepicker" />

            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar-plus-o"></i></button>

        </div>
    </div>
</div>

按钮点击调用open()并发送$ event但不打开日历，也没有向我显示Firebug中的任何错误：

angular.module('mainApp', []).controller('mainController', function($scope) {

    $scope.message = 'angular is working';

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

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

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

    //MIN AND MAX DATES
    $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();
    $scope.maxDate = new Date(2020, 5, 22);

    $scope.open = function($event) {
        $scope.status.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[1];

    $scope.status = {
        opened: false
    };

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

  $scope.getDayClass = function(date, 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

我认为您需要在外部资源中添加角度js代码

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js

我已经尝试过并运行该示例我收到了控制台错误（我坦率地说，他不知道如何调试）：

TypeError: window.angular.$$csp is not a function

但好消息是Angular似乎在JsFiddle中运作。希望它有所帮助。

如何让这个ui.bootstrap.datepicker在jsfiddle中工作？

1 个答案: