更新

Question

我正在尝试在我的项目中使用angularjs ui bootstrap datepicker但是我从示例中抓取的相同代码在我深入研究代码时似乎没有正常工作我已经意识到问题在于is-open attribute.sample我尝试在我的项目上运行的代码是。

<section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Datepicker</strong></div>
        <div class="panel-body" data-ng-controller="DatepickerDemoCtrl">
            <div class="row">
                <div class="col-sm-4">
                    <div class="input-group ui-datepicker">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" 
                               class="form-control"
                               datepicker-popup="{{format}}"
                               ng-model="dt"
                               is-open="opened"
                               min="minDate"
                               max="'2015-06-22'"
                               datepicker-options="dateOptions" 
                               date-disabled="disabled(date, mode)"
                               ng-required="true" 
                               close-text="Close">
                    </div>
                    <div class="callout callout-info">
                        <p>Date is: {{dt | date:'fullDate'}}</p>
                    </div>
                </div>

                <div class="col-sm-8">
                    <p>
                        Format:
                        <span class="ui-select">
                            <select ng-model="format"
                                    ng-options="f for f in formats"></select>
                        </span>
                    </p>

                    <button class="btn btn-sm btn-info" ng-click="today()">Today</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
                </div>
            </div>
        </div>
    </section>


.controller('DatepickerDemoCtrl', [
    '$scope', function($scope) {
      $scope.today = function() {
        return $scope.dt = new Date();
      };
      $scope.today();
      $scope.showWeeks = true;
      $scope.toggleWeeks = function() {
        return $scope.showWeeks = !$scope.showWeeks;
      };
      $scope.clear = function() {
        return $scope.dt = null;
      };
      $scope.disabled = function(date, mode) {
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
      };
      $scope.toggleMin = function() {
        var _ref;
        return $scope.minDate = (_ref = $scope.minDate) != null ? _ref : {
          "null": new Date()
        };
      };
      $scope.toggleMin();
      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        return $scope.opened = true;
      };
      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };
      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
      return $scope.format = $scope.formats[0];
    }
  ])

更新

这是我尝试分配$parent.opened以及仍无法正常工作的演示plunker

Answer 1

问题是你没有使用控制器中提供的open（$ event）函数来打开datepicker本身。

<强> FORKED PLUNKER

<input type="text" class="form-control" datepicker-popup="{{format}}" 
                ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" 
                datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
                ng-required="true" close-text="Close"
                ng-click="open($event)" />

注意我在datepicker输入中添加的ng-click事件，当您单击input元素时，它将打开datepicker。同样，对于input元素右侧的font-awesome日历按钮，我还添加了ng-click以便在单击时打开日历：

<span class="input-group-addon" ng-click="open($event)">
  <i class="fa fa-calendar"></i>
</span>

此外，您在plunker中添加了bootstrap.js脚本。由于您已经UI-Bootstrap，因此使用取决于bootstrap.js的{{1}}将是多余的。

angular ui bootstrap datepicker is-open指令不起作用

更新

1 个答案: