Datepicker不能在模态中工作。 Angular.js

我使用引导程序daterangepicker.js库，在“date”类的文本字段中生成日历。我有两个文本字段，它完美的工作模式之外，但在模式中的类“date1”和“date2”的文本字段不起作用。Datepicker不能在模态中工作。 Angular.js

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

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

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

来源

2017-01-20 yavg

你为什么用角混合不必要的jQuery？ –

可能与您的问题无关，但请尽量避免对多个元素使用相同的ID。您将id用作date1作为input.date1和input.date2。 – rJ7

rJ7谢谢！解决 – yavg

在HTML控制器添加到您的模式

就这样

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

更新小提琴：

编辑链接：

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

来源

2017-01-20 14:28:52

我有这个解决方案的问题，因为如果我这样做，它会重新加载控制器2次。这不是最佳的。 – yavg

这是真的，我通常解决这些问题的方法是为弹出窗口创建单独的控制器，然后您可以在两个控制器之间发送数据。 –

以我目前的结构，我该如何解决？我对角度了解不多。 – yavg

-1

是问题用z-index试试这个。

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

来源

2017-01-20 14:34:58

没有ID索引的问题:( – yavg

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

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

来源

2017-01-20 14:49:22

你能帮我这个请，我不知道如何在一个指令验证2个文本字段... – yavg

如果你不想使用指令，你可以创建一个单独的模态控制器，在这里你是http://fiddle.jshell.net/wfmxyL2L/4/ –

好，但你能给我一个例子，如何解决我需要做的一个指令？ – yavg

与你的代码的问题是，元素$（”。DATE1'）和$在你试图绑定datepicker的时候不存在于dom中。

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

要使用此，你将不得不角UI引导版本从这个版本由$返回的对象modal.open返回时模态呈现有被称为实现的功能升级到0.13

。

所以你的代码会改变。

$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/

来源

2017-01-20 15:11:22 Deep

Datepicker不能在模态中工作。 Angular.js

回答

相关问题