javascript - Bootstrap datepicker 日期范围结束日期更新

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

下面的代码片段显示了 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>