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