ui.bootstrap.datepicker is-open无法使用按钮

2014-09-30 54 views 0 likes

我想打开日期选择器，当我点击一个按钮。这是我的观点：ui.bootstrap.datepicker is-open无法使用按钮

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

什么，我做错了什么？非常感谢您

来源

2014-09-30 ulquiorra

回答

FORKED PLUNKER

您必须添加ng-click$event财产在你open()方法，做一个$event.preventDefault()和$event.stopPropagation()打开用户界面的自举的日期选择器。

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>

来源

2014-09-30 15:12:19 ryeballar

非常感谢你，它完美的作品！但是，你能解释我这些功能吗？ Thx – ulquiorra 2014-09-30 15:30:46

对拥有禁用属性也会导致datepicker不显示。 – Mathemats 2016-04-01 05:00:08

ui.bootstrap.datepicker is-open无法使用按钮

回答

相关问题