我有两个Bootstrap日期范围选择器。当我更改一个选择器的日期时,第二个日期范围选择器中会显示相同的日期。
如何将两个日期范围选择器分开,以便它们各自独立运行?
代码:
首次选择日期:
<div id="reportrange" class=" form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<b class="caret "></b> <span></span>
</div>
第二个日期选择器:
<div id="usersdaterange" class=" form-control"> <i class="glyphicon
glyphicon-calendar fa fa-calendar"></i> <b class="caret "></b>
<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');
});
答案 0 :(得分:0)
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
等更新另一个datepicker。
(不幸的是,目前尚不清楚最初发问者的问题来自他们发布的代码,但是我想我还是会回答这个问题,以消除任何搜索此问题的潜在困惑)