我的下面的datepicker代码如下所示。它的工作正常。但是当我点击输入字段时,会打开datepicker弹出窗口。但是一旦我点击日历图标就想要打开它。请建议我实现这一目标的方法。
<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);
};
Angular:1.6 使用&#39; ui.bootstrap.datetimepicker&#39;, 和&#u ;.bootstrap
答案 0 :(得分:1)
您需要将ng-click="model.dateFrom=true"
作为属性添加到包含日历图标的<i>
元素,而不是其父级。
我实际上建议编写一个单独的函数来打开和关闭日期选择器。像
这样的东西$scope.toggleDatePicker = function() {
$scope.model.dateFrom = !$scope.model.dateFrom;
};
然后从你的html中调用它:ng-click="toggleDatePicker()"