Datepicker在模态中不起作用。 Angular.js

Question

我正在使用bootstrap daterangepicker.js库，使用“ date”类在文本字段中生成日历。 我在模态之外的地方有两个文本字段，它可以完美地工作，但是模态中类别为“ date1”和“ date2”的文本字段不起作用。

我需要一个好的解决方案来验证两个日期，我要验证哪个日期是主要日期。

为什么会发生这种情况，我该怎么办？

 $('.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/

Answer 1

您可以使用Angular Directive，这是处理此https://docs.angularjs.org/guide/directive的推荐方法。 因为MyCtrl在呈现模式并将其附加到DOM之前运行。

更新：这里我们如何处理指令：（基本的） http://fiddle.jshell.net/q24rmsbn/1/

Answer 2

您的代码问题在于，当您尝试将datepicker与之绑​​定时，dom中不存在$（'。date1'）和$（'。date2'）元素。

对于解决方案，您可以在呈现模式时绑定datepicker功能，即元素位于DOM中。

要使用此功能，您将必须将angular-ui引导程序版本升级到0.13

从此版本开始，由$ modal.open返回的对象具有已渲染的函数，在渲染模态时将调用该函数。

因此您的代码将发生变化。

 $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",
        })
      });
    }   
  });

工作小提琴： http : //fiddle.jshell.net/pufd9413/

Answer 3

在HTML中将控制器添加到模态

像这样

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

更新的小提琴：

编辑链接：

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

Answer 4

Z-index问题，请尝试此操作。

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