CODEWITHSUNDEEP
javascriptjqueryangularjs
yavg
yavg

Reputation: 3051

Datepicker does not work in the modals. Angular.js

I'm using the bootstrap daterangepicker.js library, to generate a calendar in the text fields with the "date" class. I have two text field outside of the modal where it works perfectly, but the texts fields with the class "date1" and "date2" that are in the modal does not work.

I need a good solution to validate two dates, to which I want to validate which date is the major.

Why does this happen and what can I do?

 $('.date').daterangepicker({
        "singleDatePicker": true,
        "opens": "right",
 })

 $('.date1').daterangepicker({
        "singleDatePicker": true,
        "opens": "right",
    })

 $('.date').daterangepicker({
        "singleDatePicker": true,
        "opens": "right",
    })


<div ng-app="myApp">
 <input type='text' class='date'>

<script type="text/ng-template" id="myModal.html">
 <div class="modal-header">
   <h3 class="modal-title">Modal title</h3>
 </div>
 <div class="modal-body">
     date1
     <input type='text' class='date1' id='date1'>
    date2
    <input type='text' class='date2' id='date1'>
 </div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="close(true)">OK</button>
  <button class="btn btn-warning" ng-click="close('modalInstanceOne')">Cancel</button>
</div>


<div ng-controller="MyCtrl">
  <input type="button" value="Show modal" ng-click="showModal()" />
</div>

http://fiddle.jshell.net/q24rmsbn/

Upvotes: 0

Views: 140

Answers (4)

Duong Dang
Duong Dang

Reputation: 349

You can use Angular Directive, it's recommended way to handle this https://docs.angularjs.org/guide/directive. Because MyCtrl run before the modal is render and appended to DOM.

Updated: Here how we handle with directive: (basic one) http://fiddle.jshell.net/q24rmsbn/1/

Upvotes: 1

Deep
Deep

Reputation: 9794

The problem with you code is that element $('.date1') and $('.date2') does not exist in the dom when you are trying to bind datepicker with them.

For solution you can bind the datepicker functionality when the modal is rendered i.e the elements are in the DOM.

To use this you will have to upgrade angular-ui bootstrap version to 0.13

from this version the object returned by $modal.open returns have the function rendered which is called when the modal is rendered.

so your code will change like.

 $scope.showModal = function() {
      modalInstanceOne = $modal.open({
        templateUrl: 'myModal.html',
        scope: modalScope
      });

      modalInstanceOne.rendered.then(function() {

        $('.date1').daterangepicker({
          "singleDatePicker": true,
          "opens": "right",
        })

        $('.date2').daterangepicker({
          "singleDatePicker": true,
          "opens": "right",
        })
      });
    }   
  });

Working fiddle : http://fiddle.jshell.net/pufd9413/

Upvotes: 1

Aivaras
Aivaras

Reputation: 133

it is issue with z-index try this.

  $('.date').on('show.daterangepicker', function(e){
      var modalZindex = $(e.target).closest('.modal').css('z-index');
      $('.daterangepicker').css('z-index', modalZindex+1);
  });

Upvotes: -1

strwoc
strwoc

Reputation: 531

Add a controller to your modal in html

just like this

 <div class="modal-header" ng-controller="MyCtrl">

Updated fiddle:

Edit link:

http://fiddle.jshell.net/wfmxyL2L/1/

Upvotes: 0

Related Questions