Question

我想在点击按钮时打开一个日期选择器。以下是我的观点：

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>   
  <div ng-controller="demo">    
    <input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" is-open="opened" ng-required="true" />
    <button style="height:34px;" class="btn btn-default" ng-click="open()">
      <i class="icon-calendar"></i>
    </button>

  </div>
</body>

</html>

和我的控制器

var demo = angular.module('plunker', ['ui.bootstrap']);
demo.controller('demo', function($scope) {
  $scope.dt = new Date();
  $scope.open = function() {
    $scope.opened = true;
  };
});

可以在这里找到一个plunker：http://plnkr.co/edit/AzASfL2t5DdIx1ayDOS5?p=preview

我做错了什么？非常感谢你

Answer 1

<强> FORKED PLUNKER

您必须在ng-click方法中添加$event open()属性并执行$event.preventDefault()和$event.stopPropagation()以打开ui-bootstrap＆＃39; s日期选择器。

JAVASCRIPT

var demo = angular.module('plunker', ['ui.bootstrap']);
demo.controller('demo', function($scope) {
  $scope.dt = new Date();
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened = true;
  };
});

HTML 的

<button style="height:34px;" class="btn btn-default" ng-click="open($event)">
  <i class="icon-calendar"></i>
</button>

ui.bootstrap.datepicker是打开不使用按钮

1 个答案: