CODEWITHSUNDEEP
javascriptjqueryangularjs
dhamo dharan
dhamo dharan

Reputation: 762

jQuery DatePicker not working in AngularJs modal

I am not able to open jQuery Date Picker in Model. Date picker in outside model working fine but inside model not working. Here is the code:-

demo.html

<button class="btn" ng-click="open()">Open me!</button>
<script type="text/ng-template" id="myModalContent.html">
  <section class="popupBody">
    <form ng-submit="add()" name="deals_form">
      <input type="text" id="dt1">
      <input type="text" id="dt2">
    </form>
  </section>
</script>


<script type="text/javascript">

        $("#dt1").datepicker({
            dateFormat: "dd-M-yy",
            minDate: 0,
            onSelect: function (date) {
                var dt2 = $('#dt2');
                var startDate = $(this).datepicker('getDate');
                var minDate = $(this).datepicker('getDate');
                dt2.datepicker('setDate', minDate);
                startDate.setDate(startDate.getDate() + 30);
                //sets dt2 maxDate to the last day of 30 days window
                dt2.datepicker('option', 'maxDate', startDate);
                dt2.datepicker('option', 'minDate', minDate);
                $(this).datepicker('option', 'minDate', minDate);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd-M-yy"
        });
</script>

AngularJS controller: demo.js

  $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.open = function() {

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


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

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

Here model control is working but Datepicker is not working inside model. Please help me in making jQuery datepicker work in Modal.

Upvotes: 0

Views: 104

Answers (1)

Mohammad Raheem
Mohammad Raheem

Reputation: 1157

$(document).on('click',function(){
    $("#dt1").datepicker({
            dateFormat: "dd-M-yy",
            minDate: 0,
            onSelect: function (date) {
                var dt2 = $('#dt2');
                var startDate = $(this).datepicker('getDate');
                var minDate = $(this).datepicker('getDate');
                dt2.datepicker('setDate', minDate);
                startDate.setDate(startDate.getDate() + 30);
                //sets dt2 maxDate to the last day of 30 days window
                dt2.datepicker('option', 'maxDate', startDate);
                dt2.datepicker('option', 'minDate', minDate);
                $(this).datepicker('option', 'minDate', minDate);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd-M-yy"
        });
});

I think you lost your dom element, at the time of firing datapicker event.Go with the highest level dom id as a Scope or on Document

Upvotes: 1

Related Questions