同一页面上的多个日期范围选择器实例答案

【问题标题】：Multiple instances of daterange pickers on the same page同一页面上的多个日期范围选择器实例
【发布时间】：2018-06-08 08:04:59
【问题描述】：

我有两个 Bootstrap 日期范围选择器。当我更改一个选择器的日期时，相同的日期会出现在第二个日期范围选择器中。

如何将两个日期范围选择器分开，使它们各自独立运行？

代码：

第一个日期选择器：

<div id="reportrange" class=" form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<b class="caret "></b>&nbsp;<span></span> 
</div>

第二个日期选择器：

<div id="usersdaterange" class=" form-control"> <i class="glyphicon 
glyphicon-calendar fa fa-calendar"></i>&nbsp;<b class="caret "></b>&nbsp;
<span></span>
</div>

JS：

$('#usersdaterange 
span ').on('
  apply.daterangepicker ',function(ev1,picker1) {
  var username1 = $("#userfilter").val();
  var start1 = picker1.startDate.format('YYYY-MM-DD');
  var end1 = picker1.endDate.format('YYYY-MM-DD');
});

$('#reportrange span').on('apply.daterangepicker', function(ev, picker) {
  $("#loader").show();
  var username = $("#userfilter").val();
  var start = picker.startDate.format('YYYY-MM-DD');
  var end = picker.endDate.format('YYYY-MM-DD');
});

【问题讨论】：

你的js有错误
@LuisFernando 感谢您的回复。您想找出这些错误吗？
首先，您没有关闭关于 on() 的括号。从那个开始...
哦，是的，但同样的问题
放完整的代码，很难重现

标签： javascript jquery twitter-bootstrap bootstrap-daterangepicker

【解决方案1】：

Bootstrap daterangepicker 适用于开箱即用的多个实例。

$(function() {
  $('#dateRange1').daterangepicker({}, onSelect);
  $('#dateRange2').daterangepicker({opens:"left"}, onSelect);
});


function onSelect(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }

body{
  padding:20px;
}

#dateRange1.form-control,
#dateRange2.form-control{
  width:45vw;
}

#dateRange1{
  position:absolute;
  left:10px;
}

#dateRange2{
  position:absolute;
  right:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<input id="dateRange1" class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

<input id="dateRange2" class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

(JSFiddle)

如果这两者是相关联的，那一定是因为有一些代码将它们一起更新。也许最明显的可能性是在apply.daterangepicker 上调用了某个函数，然后用setStartDate 或setEndDate 等更新另一个日期选择器。

（不幸的是，从他们发布的代码中不清楚最初的提问者问题是什么，但我想我还是会回答这个问题，以消除任何搜索此问题的人的潜在困惑）

【讨论】：