日期选择器开始和结束日期验证不适用于更改

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

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

Answer 3

尝试一下这个解决方案。

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

})