引导日期选择器日期范围结束日期更新

Question

我正在使用这个插件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: '>'
                    }
                });

Answer 1

下面的 sn-p 显示了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>