Angular js和bootstrap ui日期选择器在点击图标时不会在chrome中打开

Angular js and bootstrap ui date picker not open in chrome on clicking on icon

本文关键字：chrome 图标 bootstrap js ui 日期 Angular 选择器      更新时间：2023-09-26

我有日期选择器在angular使用bootstrap UI。这段代码在IE中工作得很好，但在chrome中却没有打开。在调用open()方法后，输入框得到聚焦，但日期选择器弹出不打开。任何帮助都是非常感激的。提前感谢

<p class="input-group">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
                               <span class="input-group-btn">
                                  <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
                               </span>
                        </p>

Java脚本
$scope.open = function () {    
    $scope.opened = true;                                                                                    
};

您需要阻止click事件从按钮传播，因为它将导致日期选择器立即关闭…

<button type="button" class="btn btn-default" ng-click="$event.stopPropagation(); open();">
    <i class="glyphicon glyphicon-calendar"></i>
</button>

Demo - JSFiddle

以上方法可能是正确的
当你使用$event.preventDefault();$event.stopPropagation();小心它也可能影响其他组件事件。活动代码是http://jsfiddle.net/mDLzn/34/

$scope.open = function (event) { 
event.stopPropagation();
event.preventDefault();
$scope.opened = true; 
console.log('foo'); };
相关文章：