当UI Bootstrap日期选择器位于jQueryUI对话框中时，我有一些意外的行为。单击日历按钮时，日期选取器会显示在对话框中，但对话框不会调整大小，因此日期选取器大多隐藏在其中，您必须使用对话框上的滚动条才能查看所有内容。
这个 Plunker 显示了问题。
是否可以将日期选择器拉到对话框上？
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.min.js"></script>
<script>
$(function() {
$("#dialog").dialog({
resizable: false
});
});
angular.module('app', ['ui.bootstrap'])
.controller('ctrl', function(){})
</script>
<style>
.glyphicon { font-size: 20px !important; }
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<div id="dialog" title="Basic dialog">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup
ng-model="date" is-open="open">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open = true">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
</body>
有人知道如何解决这个问题吗？
尽管我不太喜欢在角度中使用观察器，但这似乎是一个很好的用途。 您可以在$scope变量"open"上放置一个监视，并相应地调整对话框的大小。 控制器将如下所示：
.controller('ctrl', function($scope) {
var originalHeight = 100;
var originalWidth = 250;
$scope.$watch('open', function() {
var newHeight = originalHeight;
var newWidth = originalWidth;
if ($scope.open) {
newHeight = newHeight * 4;
newWidth = newWidth * 1.5;
}
$("#dialog").dialog({
height: newHeight,
width: newWidth
});
});
});
您可能希望从 #dialog 元素中获取 originalWidth 和 originalHeight，但对于此示例，我只是对其进行了硬编码。