引导日期选择器不能正常工作 - Bootstrap Datepicker is not working properly

Bootstrap Datepicker is not working properly

我已经在我的脚本中实现了bootstrap daterangepicker，它在第一次工作很好。如果再次单击该链接(其中我已经实现了daterangepicker并使用AJAX调用加载了页面内容)，则引导daterangepicker将无法工作。

我正在使用ajax加载页面主体内容。我已经包含了数据范围选择器脚本，并在页面主体内容中包含了文件。

我已经在JQuery ready()函数中实现了daterangepicker。

这是我的代码，我已经实现了

HTML代码:

     <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
           <i class="icon-calendar icon-large"></i>
           <span></span> <b class="caret" style="margin-top: 8px"></b>
      </div>

JS代码:

 $(document).ready(function() {
       $('#reportrange').daterangepicker({
                    ranges: {
                       'Today': [new Date(), new Date()],
                       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                       'Last 7 Days': [moment().subtract('days', 6), new Date()],
                       'Last 30 Days': [moment().subtract('days', 29), new Date()],
                       'This Month': [moment().startOf('month'), moment().endOf('month')],
                       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },                        
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    startDate: moment().subtract('days', 6),
                 },
                 function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    start = start.format('MMMM D, YYYY');
                    end = end.format('MMMM D, YYYY');
                    test(start,end);
                 }
              );
      $('#reportrange span').html(moment().subtract('days', 6).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

});

请帮我解决我的问题

jQuery的document ready函数在页面加载DOM内容时立即触发-这通常发生在渲染之前，但几乎总是在任何AJAX调用服务器可以加载任何内容之前，包括您的reportrangediv。这意味着一旦您的AJAX调用reportrange html加载，您将需要再次触发$('#reportrange').daterangepicker({的东西。

幸运的是，jQuery知道我们有时需要这样做，所以问题是你想把它放在哪里。

如果你以一种显式的方式加载你的reportstrangediv，比如

$(".rangeArea").load("reportRange");

然后jQuery给你一个回调选项:

$(".rangeArea").load("reportRange", function() {
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

如果您以其他方式加载ajax区域，您可能希望通过全局ajax完整处理程序连接您的拾取器代码-该处理程序在每次 ajax调用后触发，因此如果您有很多back &来交流:

$.ajaxComplete(function(){
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

另一个可能保释您的事情是，您正在调用您的<div id=reportrange>，这意味着在页面上只能有一个-请记住，id属性必须是唯一的页面上，即使内容稍后加载。如果您可能在同一页面上有第二个reportrange，您可能需要从id切换到类名:<div class=reportrange>和$(".reportrange")。

最后一件事- jQuery(document).ready(function(){...})可以写成更简洁的$(function(){...})