ui.bootstrap.datepicker is-open 不使用按钮 [英] ui.bootstrap.datepicker is-open not working with a button

查看：20 发布时间：2021/11/10 3:56:38 angularjs angular-ui

本文介绍了ui.bootstrap.datepicker is-open 不使用按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在单击按钮时打开日期选择器.这是我的观点:

<html ng-app="plunker"><头><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"><身体><div ng-controller="演示"><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>

</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=预览

我做错了什么?非常感谢

解决方案

FORKED PLUNKER

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

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

I want open a datepicker when i click on a button. Here is my view :

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

and my controller

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

A plunker can be found here : http://plnkr.co/edit/AzASfL2t5DdIx1ayDOS5?p=preview

What i am doing wrong ? Thank you very much
解决方案
FORKED PLUNKER

You have to add the ng-click $event property in your open() method and do an $event.preventDefault() and $event.stopPropagation() to open ui-bootstrap's datepicker.

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 is-open 不使用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

ui.bootstrap.datepicker is-open 不使用按钮 [英] ui.bootstrap.datepicker is-open not working with a button

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

ui.bootstrap.datepicker is-open 不使用按钮 [英] ui.bootstrap.datepicker is-open not working with a button

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭