日历弹出窗口无效

时间:2015-03-25 11:48:53

标签: javascript angularjs html5 twitter-bootstrap angular-ui-bootstrap

当我使用angular.module("task", ['angularSpinner','ui.bootstrap'])时,日历弹出窗口无法正常工作。我收到了错误:

  

错误:指令datepickerPopup:=?

的隔离范围定义无效

这是我的HTML页面

<div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" data-keyboard="false">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel">Create a New Task</h4>
                            </div>
                            <div class="modal-body">
                                <form name="registertaskForm" role="form" id="registertaskForm">
                                <span us-spinner="{radius:10, width:4, length: 15}" spinner-key="spinner-1-reg"></span>
                                    <div  class="form-group">          
                                        <input ng-model="taskname" type="text" ng-class="{ errorinput: submitted && registertaskForm.taskname.$invalid }" class="form-control" name="jobname" id="jobname" placeholder="Task Name" style="border-radius:0px;" />
                                        <input ng-model="taskInstances" min="1" max="10" class="form-control" type="number" name="workerInstance" id="workerInstances" placeholder="Task Instance" value="1" onblur="if(this.value<1) { this.value='1'}" required/>
                                        <select ng-model="taskSelected" ng-options="select for select in taskTypes" style="width: 100%;"></select> 
                                    </div>
                                    <div ng-if="taskSelected == 'Job1'" class="form-group">
                                        <p class="input-group">
                                          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                                          <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                          </span>
                                        </p>
                                    </div>
                                    <div ng-if="taskSelected == 'Job2'" class="form-group">
                                        <p class="input-group">
                                          dfghdfhdfgh
                                        </p>
                                    </div>
                                    <div class="modal-footer text-right">
                                        <button type="submit" ng-disabled="register" class="btn btn-primary" ng-click="submitTheForm();">Create</button>
                                    </div>
                                </form>         
                            </div>

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

这是我的控制器

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

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

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

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

0 个答案:

没有答案