需要在单击日历图标时打开日期选择器弹出窗口，而不是单击输入字段

Question

我下面的日期选择器代码如下所示。它工作正常。但是当我单击输入字段时，会打开日期选择器弹出窗口。但是，一旦我单击日历图标，它就会打开。请建议我实现这一目标的方法。

 <div class="col-sm-6 col-md-6 col-lg-6 padleft">
    <div class="form-group">
        <label for="exampleSelect1">Start Date
        </label>
        <div class="input-group" style="width:75%">
        <div class="input-group-btn">
        <input type="text" 
        class="form-control date" 
        id="dateFrom" 
        placeholder="From" 
        ng-click="model.dateFrom=true"
        datepicker-popup="{{model.format}}" 
        ng-model="model.defect.startDate" 
        is-open="model.dateFrom" 
        datepicker-options="dateOptions" 
        date-disabled="model.disabled(date, mode)" 
        ng-required="true" 
        close-text="Close"  my-date>
          <span class="btn btn-default " ng-click="model.dateFrom=true"><i class="glyphicon glyphicon-calendar"></i> </span>
            </div>
        </div>
    </div>
</div>

在我的控制器中：

     self.format = 'MM-dd-yyyy';
     self.open = function($event) {

        $event.preventDefault();
        $event.stopPropagation();

        self.opened = {};
        self.opened[$event.target.id] = true;

        // log this to check if its setting the log    
        console.log(self.opened);

      };

角度：1.6 使用“ui.bootstrap.datetimepicker”， 和'ui.bootstrap

Answer 1

您需要将ng-click="model.dateFrom=true" 作为属性添加到包含日历图标的<i> 元素，而不是其父跨度。

我实际上建议编写一个单独的函数来打开和关闭日期选择器。类似的东西

$scope.toggleDatePicker = function() {
    $scope.model.dateFrom = !$scope.model.dateFrom;
};

然后从您的 html 中调用它：ng-click="toggleDatePicker()"