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

Question

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

After clicking on "Open Me" button

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.

Arun Saini · Accepted Answer · 2017-09-13 04:41:54Z

Modifications:

Upgraded the versions of scripts.
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');
    };
}])

You pointed me in right direction. I have used "uib-datepicker-popup" in "uib-modal" to pop up the date. Thanks for sharing your views — simple user, Commented Jun 11, 2017 at 4:46

Arun Saini · Accepted Answer · 2017-06-09 07:25:19Z

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>

Thanks for the update. If you point me out which thing did I miss in my code then I can add in my code and get to understand the missing thing? — simple user, Commented Jun 9, 2017 at 11:41
Hi, Posted another answer duplicate of this one. Please check. — Arun Saini, Commented Jun 9, 2017 at 17:34

Collectives™ on Stack Overflow

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

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related