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

问题

I have date picker in angular using bootstrap UI. This code is working very fine in IE but its not get open in chrome. As after calling the method open () input box get focused but date picker popup not opens. Any help will be really appreciable. Thanks in advance

<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 Script

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

回答1:

You need to stop the click event from propagating from the button as it will cause the datepicker to close instantly...

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

Demo - JSFiddle

回答2:

it may correct way to use above solution .
when you use $event.preventDefault(); $event.stopPropagation(); be carefully . it may affect other components events too. the live code is http://jsfiddle.net/mDLzn/34/

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

来源：https://stackoverflow.com/questions/24501725/angular-js-and-bootstrap-ui-date-picker-not-open-in-chrome-on-clicking-on-icon