Question

我正在使用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/

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>

根据首次选择的日期限制日期范围

1 个答案: