根据第一个选择的日期限制日期范围

Question

我正在使用 bootstrap-datepicker。我有 2 个输入字段，我想限制从第一个输入字段的用户 select 日期之后的第一个日期开始的接下来 5 天内的第二个输入。

date 1 <input type="text" class="datepicker"><br>
date 2 <input type="text" class="datepicker2"><br>

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

            $('.datepicker2').datepicker('setStartDate', startDate);

            $('.datepicker2').datepicker('endDate', '+5d')
        });
});

$(function(){
    $('.datepicker2').datepicker({
        format: 'mm-dd-yyyy',
        autoclose: true,
        //endDate: '+5d'
    });
});

这目前无法正常工作。如果我把它放在 datepicker2 属性中，它确实有效。请帮助并提前致谢

这是代码示例：http://jsfiddle.net/jnh8pyst/

Answer 1

为此，您必须使用 setEndDate 方法并创建 endDate 加上您想要的 x 天，以 startDate 作为基础，然后使用 setEndDate所需的选择器。

let endDate = new Date(startDate);
endDate = new Date(endDate.setDate(endDate.getDate() + 5));
$('.datepicker2').datepicker('setEndDate', endDate);

到最后你将拥有：

$(function() {

  $('.datepicker').datepicker({
    format: 'mm-dd-yyyy',
    autoclose: true
  }).on('changeDate', function(selected) {
    let startDate = new Date(selected.date.valueOf());
    let endDate = new Date(startDate);
    endDate = new Date(endDate.setDate(endDate.getDate() + 5));
    $('.datepicker2').datepicker('setStartDate', startDate);
    $('.datepicker2').datepicker('setEndDate', endDate);
  });

  $('.datepicker2').datepicker({
    format: 'mm-dd-yyyy',
    autoclose: true,
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
Date 1
<input type="text" class="datepicker">
<br> Date 2
<input type="text" class="datepicker2">
<br>

根据第一个选择的日期限制日期范围

Limit date range based on first selected date

javascript

datepicker

bootstrap-datepicker