我需要jQuery daterangepicker的帮助。我正在尝试触发单击并选择开始日期，同时调用日期范围选择器。在那之后，我将手动单击将来的日期，它将被视为结束日期并为日期范围选择器设置日期范围。但我做不到。
.HTML-
<html>
<head>
<title>Test datepicker</title>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<div class="from">
<div class="panel">
<p>From Date</p>
<input type="textbox" name="from" id="from">
</div>
<div class="panel">
<p>To Date</p>
<input type="textbox" name="to" id="to">
</div>
</div>
</body>
</html>
JS代码是 -
<script type="text/javascript">
var toval = '';
$(document).ready(function(){
$('#from').daterangepicker({
"showDropdowns": true,
"singleDatePicker": true
});
$("#from").change(function(){
$('#from').css('color','#000');
var from = $("#from").val();
if(toval=='') {
$('#to').daterangepicker({
"showDropdowns": true,
"autoApply": true,
"startDate": from,
"endDate": from
});
} else {
$('#to').daterangepicker({
"showDropdowns": true,
"autoApply": true,
"startDate": from,
"endDate": from+" - "+toval
});
}
$('#to').css('color','#fff');
$(".right").hide();
});
$("#to").change(function(){
toval = $("#to").val();
toval = toval.split(" - ");
var frm = toval[0];
toval = toval[1];
$('#to').val(toval);
$('#from').val(frm);
$('#to').css('color','#000');
});
if(toval=='') {
var from = $("#from").val();
$('#to').daterangepicker({
"showDropdowns": true,
"autoApply": true,
"startDate": from,
"endDate": from
});
} else {
$('#to').daterangepicker({
"showDropdowns": true,
"autoApply": true,
"startDate": from,
"endDate": from+" - "+toval
});
}
$('#to').css('color','#fff');
$('#from').css('color','#fff');
$(".right").hide();
});
</script>
请在这个问题上帮助我。
您可能应该首先在脚本包含的顶部添加对 JQuery 的引用，因为它就像您所说的那样工作：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>