Search code examples
jqueryangularjsangular-ui-bootstrapbootstrap-modaljquery-ui-datepicker

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

I am not able to open jQuery UI Date Picker in UI Bootstrap Model. Normal HTML date picker is opening up but jQuery Date Picker is not opening up. Here is the code:-

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>

Test1. 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();
            }


        }
       });            
    }])

Please find below the screenshot of HTML Pages after rendered in browser:-

Test.html enter image description here

After clicking on "Open Me" buttonenter image description here

Here you can see the normal HTML Date control is working but jQuery UI Datepicker is not.

Please help me in making jQuery UI datepicker work in Modal.

Solution

  • Modifications:

    1. Upgraded the versions of scripts.
    2. Used $modal service to show popup in place of $uibModal.

    @user1843970, To make it work smoothly replace the code of your files as follows:

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