javascript - Air Datepicker - 用于突出显示的动态最小和最大日期

Question

要选择日期范围，我使用 Air Datepicker插件。

要连接插件，我使用 CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>

插件初始化:

var block = document.querySelector("#block");
    document.querySelector("#datepicker").addEventListener("focus", function() {
        block.style.display = "none";
    }, false);
    document.querySelector("#datepicker").addEventListener("blur", function() {
        block.style.display = "block";
    }, false);


    var maxdate = new Date(); //get current date
    maxdate.setDate(maxdate.getDate() + 14); //add 14 days
    function parseDate(str) {
    var mdy = str.split('/');
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
    }

    function datediff(first, second) {
    return Math.round((second-first)/(1000*60*60*24));
    }

    $(function() {
        var myDatepicker =  $('#datepicker').datepicker({
            language: 'en',
            range:true,
            autoClose: 'true',
            clearButton: 'true',                
            minDate: new Date(),
            maxDate: maxdate,
            multipleDatesSeparator : ' - ',
            onSelect: function onSelect(selectedDates) {
            console.log(selectedDates);
                if(selectedDates !== undefined && selectedDates != '' && selectedDates.indexOf('-') > -1){
                var mdy = selectedDates.split('-');
                $("#arr_date").val(mdy[0]);
                $("#dep_date").val(mdy[1]);                 
                $("#num_nights").val(datediff(parseDate(mdy[0]), parseDate(mdy[1])));
                }
            }
        })
    });

HTML 代码:

<input type="text" id="datepicker" placeholder="Select..." class="rental-input" />
<!--Start Date <input type="text" id="arr_date"><br />
End Date <input type="text" id="dep_date"><br />-->
<div id="block">You have chosen: <input type="text" id="num_nights" class="rental-total" readonly />days rental</div>

如何实现以下功能？用户单击第一个日期，例如 4 月 1 日。

他只能展示 14 天，他可以选择，直到 4 月 14 日。

用户要么点击4月15日，他也只显示14天，可以选择，直到4月29日。

因此，当您单击任何第一次约会时。在这两种情况下，均为 minDate: 0 和 maxDate: 14，

我请求你的帮助!谢谢!

Answer 1

更改一段代码。

onSelect: function onSelect(selectedDates) {
    console.log(selectedDates);
    if(selectedDates !== undefined && selectedDates.indexOf('-') <= -1 && selectedDates != ''){
        var dayst = selectedDates.split('.');
        dayst[0] = +dayst[0] + 14;
        var year = +dayst[2];
        var month = +dayst[1] - 1;
        var day = +dayst[0];
        $('#datepicker').datepicker({
            maxDate: new Date(year, month, day)
        });
    }
    else if(selectedDates !== undefined && selectedDates != '' && selectedDates.indexOf('-') > -1){
        var mdy = selectedDates.split('-');
        var dist = mdy[0].split('.');
        dist[0] = +dist[0] + 14;
        var year = +dist[2];
        var month = +dist[1] - 1;
        var day = +dist[0];
        $('#datepicker').datepicker({
        maxDate: new Date(year, month, day)
        });
    }
    else if(selectedDates !== undefined || selectedDates != ''){
        $('#datepicker').datepicker({
            maxDate: ''
        });
    }
  }
})
});