角ui引导datepicker is-open指令不工作 [英] angular ui bootstrap datepicker is-open directive not working

问题描述

我试图在我的项目中使用angularjs ui bootstrap datepicker，但是从我的例子中抓取的相同代码似乎在我正在使用代码时似乎不能正常工作，我已经意识到问题是使用is-open attribute.sample我试图运行我的项目的代码是。

i'm trying to use angularjs ui bootstrap datepicker on my project but same code i grabbed from example doesn't seems to be working properly when i dig in to code i have realized the problem is with is-open attribute.sample code i tried to run on my project was.

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

更新

这里是演示 plunker 我试图分配 $ parent.opened 还没有工作

updated

here is the demo plunker i have tried to assigning $parent.opened as well still not working

推荐答案

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

The problems is you're not using the open($event) function that is provided in your controller to open the datepicker itself.

FORKED PLUNKER

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)" />

注意我添加的 ng-click 事件在datepicker输入中，当您单击输入元素时，它将打开datepicker。同样，对于输入元素右侧的字体优美日历按钮，我也添加了一个 ng-click ，以便在单击时打开日历：

Notice the ng-click event I added in the datepicker input, when you click the input element, it will open the datepicker. Likewise for the font-awesome calendar button on the right side of the input element, I have added an ng-click as well to open the calendar when it is clicked:

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

此外，您正在添加 bootstrap.js 脚本中的plunker。由于您已经是 UI-Bootstrap ，那么使用 bootstrap.js 将取决于 JQuery 。

Furthermore, you were adding the bootstrap.js script in the plunker. Since you're already UI-Bootstrap, then it would be redundant to use bootstrap.js which depends on JQuery.

这篇关于角ui引导datepicker is-open指令不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！