javascript - 日期选择器在模态中不起作用。 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

您代码的问题是，当您尝试时，元素 $('.date1') 和 $('.date2') 在 dom 中不存在将日期选择器与它们绑定(bind)。

对于解决方案，您可以在呈现模式时绑定(bind)日期选择器功能，即元素位于 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",
        })
      });
    }   
  });

工作 fiddle :http://fiddle.jshell.net/pufd9413/