Question

我正在使用引导日期选择器。当我选择开始日期时，结束日期验证第一次可以正常工作。但是当我再次更改开始日期时，结束日期限制仍然保持不变。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script !src="">
  // Include Date Range Picker -->
  let format = 'yyyy-mm-dd';
  // Start date
  $('.start-date').datepicker({
    startDate: new Date(),
    format: format,
    autoclose: true
  });
  // End date
  $('.start-date').on("change", function() {
    $('.end-date').val('');
    $('.end-date').datepicker({
      startDate: $('.start-date').val(),
      format: format,
      autoclose: true
    });
  })

</script>

在变更功能中，我获得了$('.start-date').val()的变更值，但结束日期的限制保持不变。

Answer 1

嘿，您不应将$('.end-date').datepicker放在$('.start-date').on('change' ...侦听器中，因为它会在.start-date的每次更改中附加日期选择器。

将.end-date日期选择器放置在'onchange'之外，只是保持$('.end-date').val('');清洁字段。

告诉我们一切是否顺利。

Answer 2

尝试此解决方案。

let format = 'yyyy-mm-dd';
// Start date
$('.start-date').datepicker({
    startDate: new Date(),
    format: format,
    autoclose: true
});

$('.end-date').datepicker({
    startDate: new Date(),
    format: format,
    autoclose: true
});

$('.start-date').datepicker().on("changeDate", function() {
    let newStartDate = $('.start-date').datepicker('getDate');

    $('.end-date').datepicker('update', '');
    $('.end-date').datepicker('setStartDate', newStartDate);
})

Answer 3

$(document).ready(function() {
  $("#startDate").datepicker({
    format: 'yyyy-mm-dd',
    startDate: new Date(),
    autoclose: true,
    autoclose: true,
  }).on('changeDate', function(selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#endDate').datepicker('setStartDate', minDate);
  });

  $("#endDate").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
  }).on('changeDate', function(selected) {
    var minDate = new Date(selected.date.valueOf());
    $('#startDate').datepicker('setEndDate', minDate);
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<form autocomplete="off">
  <input type="text" id="startDate">
  <input type="text" id="endDate">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

注意：您可以使用changeDate事件。

datepicker开始和结束日期验证不适用于更改

3 个答案: