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



我正在使用这个插件 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: '&lt;',
    rightArrow: '&gt;'
  }
});
$('.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>

最新更新