我正在使用这个插件 https://bootstrap-datepicker.readthedocs.io/en/latest/
我面临的问题来自使用此插件的"范围"形式。
从文档中,我知道有一种方法可以捕获"changeDate"事件并在发生这种情况时执行某些操作,但是,当初始日期高于结束日期时,结束日期会立即更新,我不希望这种行为; 我想要的是结束日期为空并重新选择结束日期, 但我不知道如何捕获和修改它。
提前谢谢。
EDIT2:澄清一下,当两个日期都已输入时,就会发生这种情况,但随后,您选择的开始日期高于结束日期。
编辑:这是显示我正在使用的选项的加载代码。
$('.input-daterange').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: lang,
daysOfWeekHighlighted: "0,6",
startDate: obj.initialDate,
orientation: "bottom auto",
autoclose: true,
showOnFocus: false,
maxViewMode: 'days',
keepEmptyValues: true,
templates: {
leftArrow: '<',
rightArrow: '>'
}
});
下面的代码片段显示了changeDate
事件触发的顺序。如果用户设置的开始日期值晚于完成日期,则changeDate
事件将首先在输入finish
触发。
$('.input-daterange').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "en",
daysOfWeekHighlighted: "0,6",
startDate: "01/01/2017",
orientation: "bottom auto",
autoclose: true,
showOnFocus: true,
maxViewMode: 'days',
keepEmptyValues: true,
templates: {
leftArrow: '<',
rightArrow: '>'
}
});
$('.input-daterange').on('changeDate', function(e){
console.log(e.target.name + ": " + $(e.target).val());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<span class="input-group-addon">From</span>
<input type="text" name="start" class="form-control" value="22/05/2017">
<span class="input-group-addon">to</span>
<input type="text" name="finish" class="form-control" value="22/05/2017">
</div>
因此,有必要检测发射的原因。如果原因不是用户操作,则重置日期值。我还发现preventDefault()
方法不适用于此事件。因此,我使用了两个辅助变量来解决您的问题:
var userTarget = "";
var exit = false;
$('.input-daterange').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "en",
daysOfWeekHighlighted: "0,6",
startDate: "01/01/2017",
orientation: "bottom auto",
autoclose: true,
showOnFocus: true,
maxViewMode: 'days',
keepEmptyValues: true,
templates: {
leftArrow: '<',
rightArrow: '>'
}
});
$('.input-daterange').focusin(function(e) {
userTarget = e.target.name;
});
$('.input-daterange').on('changeDate', function(e) {
if (exit) return;
if (e.target.name != userTarget) {
exit = true;
$(e.target).datepicker('clearDates');
}
exit = false;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<span class="input-group-addon">From</span>
<input type="text" name="start" class="form-control" value="20/05/2017">
<span class="input-group-addon">to</span>
<input type="text" name="finish" class="form-control" value="22/05/2017">
</div>