Question

我使用bootstrap daterangepicker.js库，在文本字段中使用＆＃34; date＆＃34;生成日历。类。我在模态之外有两个文本字段，它完美地工作，但文本字段与类＆＃34; date1＆＃34;和＆＃34; date2＆＃34;在模态中不起作用。

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

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

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

您的代码问题是元素 $（＆＃39; .date1＆＃39;）和 $（＆＃39; .date2＆＃39;）当你试图用它们绑定datepicker时，dom中不存在。

对于解决方案，您可以在渲染模态时绑定datepicker功能，即元素在DOM中。

要使用此功能，您必须将angular-ui bootstrap版本升级到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);
  });

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

4 个答案: