Angular js и средство выбора даты пользовательского интерфейса bootstrap не открываются в Chrome при нажатии на значок

#javascript #angularjs #datepicker #modal-dialog #angular-ui-bootstrap

#javascript #angularjs #средство выбора даты #модальный диалог #angular-ui-bootstrap

Вопрос:

У меня есть средство выбора даты в angular с использованием пользовательского интерфейса bootstrap. Этот код отлично работает в 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 Script

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

Ответ №1:

Вам необходимо остановить распространение события click с кнопки, поскольку это приведет к мгновенному закрытию datepicker…

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

Демонстрация — JSFiddle

Комментарии:

1. вероятно, следует добавить оба из них $event.preventDefault(); $event.stopPropagation();

2. Спасибо @Anthony Chu, для меня это нормально. Большое спасибо.

Ответ №2:

это может исправить способ использования вышеуказанного решения.
при использовании $event.preventDefault(); $event.stopPropagation(); будьте осторожны . это также может повлиять на события других компонентов. текущий кодhttp://jsfiddle.net/mDLzn/34 /

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