jQuery UI Datepicker 在 Angular JS UI Bootstrap 模态中不工作

Question

我无法在 UI Bootstrap 模型中打开 jQuery UI 日期选择器。正常 HTML 日期选择器正在打开，但 jQuery 日期选择器未打开。这是代码：-

Test.html

<!DOCTYPE html>
<html ng-app="appHome">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>   
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>         
    <script src="../Scripts/AngularControllers/Test.js"></script>
    <script src="../Scripts/AngularControllers/Test1.js"></script>                                              
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">        
</head>
<body>
    <div ng-controller="ModalDemoCtrl">           
        <button type="button"  ng-click="open()">Open me!</button>         
    </div>
</body>
</html>

Test.js

var myApp = angular.module('appHome', ['ui.bootstrap']);    

myApp.controller('ModalDemoCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {            
    $scope.open = function (size, parentSelector) {       
        var modalInstance = $uibModal.open({                            
            templateUrl: 'Test1.html',
            controller: 'ModalDemoCtrl1',
            size :'lg'
        });           
    };            
}])

Test1.html

<div>            
        <h1>Modal Body</h1>                  
        <input type="date" />
        Date of Birth<input type="text" class="datepicker-ui" id="dateDOB" ng-model="dob">           
    </div>

测试1。 js

 var myApp = angular.module('appHome');   
 myApp.controller('ModalDemoCtrl1', ['$scope',  function ($scope) {                          

        $(".datepicker-ui").datepicker({

            dateFormat: "dd/mm/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
            stepMonths: 1,       
            onSelect: function (date) {
                  if (this.id == "dateDOB") {
                       $scope.dob = date;
                       $scope.$apply();
            }


        }
       });            
    }])

请在下面找到 HTML 页面在浏览器中呈现后的屏幕截图：-

Test.html

点击 "Open Me" 按钮后

在这里您可以看到正常的 HTML 日期控件正在工作，但 jQuery UI 日期选择器没有。

请帮助我使 jQuery UI 日期选择器在 Modal 中工作。

Answer 1

angular.module('HomeApp', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {

  $scope.open = function() {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });

    modalInstance.result.then(function(selected) {
      $scope.selected = selected;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

var ModalInstanceCtrl = function($scope, $modalInstance, $timeout) {

  $scope.dt = new Date();


  $scope.open = function() {

    $timeout(function() {
      $scope.opened = true;
    });
  };


  $scope.ok = function() {
    $modalInstance.close($scope.dt);
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
};

<!doctype html>
<html ng-app="HomeApp">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">

      <div class="modal-header">
        <h3>I'm a modal!</h3>
      </div>
      <div class="modal-body" style="height:600px;">
        <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
        <div class="form-horizontal">
          <div class="input-group">
            <input type="text" class="form-control" datepicker-popup="dd.mm.yyyy" ng-model="dt" is-open="$parent.opened" ng-required="true" close-text="Close" />

            <span class="input-group-btn">
              <button style="height:34px;" class="btn calendar btn-default" ng-click="open()">
             
              </span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
      </div>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
  </div>
</body>

</html>

Answer 2

修改：

升级了脚本版本。
使用 $modal 服务代替 $uibModal 显示弹出窗口。

@user1843970，为了使其顺利运行，请按如下方式替换文件代码：

Test.html

<!DOCTYPE html>
<html ng-app="appHome">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
 <script src="../Scripts/AngularControllers/Test.js"></script>
<script src="../Scripts/AngularControllers/Test1.js"></script> 

</head>
<body>
    <div ng-controller="ModalDemoCtrl">

        <button class="btn" ng-click="open()">Open me!</button>
        <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    </div>
</body>
</html>

Test.js

var myApp = angular.module('appHome', ['ui.bootstrap']);

myApp.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {
    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'Test1.html',
            controller: 'ModalInstanceCtrl'
        });

        modalInstance.result.then(function (selected) {
            $scope.selected = selected;
        }, function () {
          console.log('Modal dismissed at: ' + new Date());
        });
    };
}])

Test1.html

 <div class="modal-header">
        <h3>I'm a modal!</h3>
    </div>
    <div class="modal-body" style="height:600px;">
        <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
        <div class="form-horizontal">
            <div class="input-group">
                <input type="text" class="form-control" datepicker-popup="dd.mm.yyyy" ng-model="dt" is-open="$parent.opened" ng-required="true" close-text="Close" />

                <span class="input-group-btn">
                    <button style="height:34px;" class="btn calendar btn-default" ng-click="open()">

                </span>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>

Test1.js

var myApp = angular.module('appHome');

myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', '$timeout', function ($scope, $modalInstance, $timeout) {

    $scope.dt = new Date();


    $scope.open = function () {

        $timeout(function () {
            $scope.opened = true;
        });
    };


    $scope.ok = function () {
        $modalInstance.close($scope.dt);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}])

jQuery UI Datepicker 在 Angular JS UI Bootstrap 模态中不工作

jQuery UI Datepicker is not working in Angular JS UI Bootstrap modal

jquery

jquery-ui-datepicker

angularjs

angular-ui-bootstrap

bootstrap-modal