个人中心
gpt4 book ai didi

jQuery UI Datepicker 无法在 Angular JS UI Bootstrap 模式中工作

转载 作者：行者123 更新时间：2023-12-01 04:38:36 33 4
gpt4 key购买 nike

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

测试.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>

测试.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'
        });           
    };            
}])

测试1.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 页面的屏幕截图如下:-

测试.html enter image description here

点击“打开我”按钮后enter image description here

在这里您可以看到正常的 HTML Date 控件正在工作，但 jQuery UI Datepicker 却没有。

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

最佳答案

修改:

  1. 升级了脚本版本。
  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 模式中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44450454/

33 4 0
文章推荐： contiki - 如何使用 Cooja 计算总能耗
文章推荐： java - 与 FileNet 内容引擎交互的 Web 服务中的 JAAS 授权
文章推荐： Javascript 在下载时更改文件名
文章推荐： jquery - 使用 AJAX 在 Laravel 中进行实时搜索
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com