jquery - 如何根据特定值在jquery datepicker中设置maxDate

Question

我正在尝试根据用户选择的给定输入日期设置ma​​xDate，假设如果用户选择今天日期，则ma​​xDate应设置为从今天甚至一周最多。但我使用以下逻辑根据用户输入选择自动设置 minDate

 $(checkIn).datepicker(
           {
                changeMonth:false,
                changeYear:false,
                dateFormat: 'dd/mm/yy',
                minDate:0
           });
           var temp;
           $(checkIn).on("change",function()
           {
               var select = $(this).datepicker("getDate");
               temp=select;
               $(checkOut).datepicker('option','minDate',temp)

           })

这个逻辑在这里工作正常，但是当我尝试根据这个逻辑设置 maxDate 时，我收到了某些错误，这里是代码

$(checkOut).datepicker({
               changeMonth:false,
                changeYear:false,
                dateFormat: 'dd/mm/yy',
                maxDate: new Date($(checkIn).val()) + "1w"
    })

当我运行此代码时，如果我选择今天的日期，它会给出正确的 ma​​xDate 最多 7 天，但如果我再次更改 checkIn 输入 maxDate 少一天，因此当我继续选择当前日期之前的日期时，checkOut 输入中的所有日期都会出现一个点已禁用，我无法选择其中任何一个。

Answer 1

您可以删除更改事件并使用beforeShow回调以便设置第二个日期选择器的 maxDate，如下所示:

$('#checkIn').val($.datepicker.formatDate('dd/mm/yy', new Date()));
$('#checkIn').datepicker({
    changeMonth: false,
    changeYear: false,
    dateFormat: 'dd/mm/yy',
    minDate: 0,
});

$('#checkOut').datepicker({
    changeMonth:false,
    changeYear:false,
    dateFormat: 'dd/mm/yy',
    beforeShow: function(input, inst) {
        var minDate = $('#checkIn').datepicker('getDate');
        $('#checkOut').datepicker('option', 'minDate', minDate);
        var maxDate = new Date(minDate.valueOf());
        maxDate.setDate(maxDate.getDate() + 7);
        $('#checkOut').datepicker('option', 'maxDate', maxDate);
    }
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<p>Chack In date: <input type="text" id="checkIn"></p>

<p>Check Out date: <input type="text" id="checkOut"></p>