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

【问题标题】：Limit date range based on first selected date根据第一个选择的日期限制日期范围
【发布时间】：2019-02-20 10:53:42
【问题描述】：

我正在使用bootstrap-datepicker。我有 2 个输入字段，我想在用户从第一个输入字段中选择日期后的第一个日期后的第一个日期后的 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/

【问题讨论】：

标签： javascript datepicker bootstrap-datepicker

【解决方案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>

【讨论】：