Question

我正在使用此插件https://bootstrap-datepicker.readthedocs.io/en/latest/

我面临的问题来自于使用＆＃34;范围＆＃34;这个插件的形式。

从我理解的文档中可以捕获＆＃34; changeDate＆＃34;事件并在发生这种情况时执行某些操作，但是，当初始日期高于结束日期时，结束日期会立即更新，我不想要这种行为;我想要的是结束日期为空白并重新选择结束日期，但我不知道如何捕获和修改它。

提前致谢。

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: '&lt;',
                        rightArrow: '&gt;'
                    }
                });

Answer 1

下面的代码段显示.toolbar-title.toolbar-title-md, .toolbar-title.toolbar-title-ios, .toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }事件触发的顺序。如果用户设置的开始日期值晚于完成日期，那么changeDate事件将首先在changeDate输入时触发。

＆＃13;

finish

＆＃13;

$('.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').on('changeDate', function(e){
  console.log(e.target.name + ": " + $(e.target).val());
});

＆＃13;

因此，有必要检测发射的原因。如果原因不是用户操作，则重置日期值。另外，我发现preventDefault()方法对此事件不起作用。因此，我使用了两个辅助变量来解决您的问题：

＆＃13;

<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>

＆＃13;

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;
});

＆＃13;

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

1 个答案: