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: ''
        });
    }
  }
})
});

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

1 个答案: