angular-ui-bootstrap datepicker隐藏在jQuery UI对话框中

Question

当UI Bootstrap日期选择器位于jQueryUI对话框中时，我有一些意外的行为。 单击日历按钮后，对话框中将显示日期选择器，但对话框不会调整大小，因此日期选择器大部分隐藏在其中，并且您必须使用对话框上的滚动条才能看到所有内容。

此柱塞显示了该问题。

是否可以将日期选择器拉到对话框上方？

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

有人知道该如何解决吗？

Answer 1

即使我不喜欢在角度上使用观察器，这似乎还是一个不错的用法。 您可以将手表放在$ 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，但是在本示例中，我只是对其进行了硬编码。

angular-ui-bootstrap datepicker隐藏在jQuery UI对话框中

问题描述

1 个解决方案

解决方案1
0 2016-05-19 17:41:23

angular-ui-bootstrap datepicker隐藏在jQuery UI对话框中

问题描述

1 个解决方案

解决方案1 0 2016-05-19 17:41:23

解决方案1
0 2016-05-19 17:41:23