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

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() {&nbsp; $("#startDate").datepicker({&nbsp; &nbsp; format: 'yyyy-mm-dd',&nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; autoclose: true,&nbsp; &nbsp; autoclose: true,&nbsp; }).on('changeDate', function(selected) {&nbsp; &nbsp; var minDate = new Date(selected.date.valueOf());&nbsp; &nbsp; $('#endDate').datepicker('setStartDate', minDate);&nbsp; });&nbsp; $("#endDate").datepicker({&nbsp; &nbsp; format: 'yyyy-mm-dd',&nbsp; &nbsp; autoclose: true,&nbsp; }).on('changeDate', function(selected) {&nbsp; &nbsp; var minDate = new Date(selected.date.valueOf());&nbsp; &nbsp; $('#startDate').datepicker('setEndDate', minDate);&nbsp; });});<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">&nbsp; <input type="text" id="startDate">&nbsp; <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({&nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; format: format,&nbsp; &nbsp; autoclose: true});$('.end-date').datepicker({&nbsp; &nbsp; startDate: new Date(),&nbsp; &nbsp; format: format,&nbsp; &nbsp; autoclose: true});$('.start-date').datepicker().on("changeDate", function() {&nbsp; &nbsp; let newStartDate = $('.start-date').datepicker('getDate');&nbsp; &nbsp; $('.end-date').datepicker('update', '');&nbsp; &nbsp; $('.end-date').datepicker('setStartDate', newStartDate);})