Jquery日期选择器-防止选择范围内的不可用日期

Jquery Datepicker - prevent select in range unavailable dates

本文关键字：日期 范围内 选择器 Jquery 选择      更新时间：2023-11-04

我有两个日期选择器（从日期到日期），或者当一个人住在我的酒店时和他离开时。我想要实现的是不让用户选择包含不可用日期的范围。

例如：

今天是2015年2月13日，有人想预订2015年12月15日至2月23日的时间，但日期2015年02月19日和2015年02日20日已经预订。因此，我想禁用从2015年2月19日开始的所有字段，这意味着他只能选择从2015年12月15日到2015年8月18日。这取决于他选择的日期，他只能预订第一个不可用的日期，而不能预订下一个。

我怎样才能做到这一点？

这是我的html代码： 

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

这是javascript代码

var unavailableDates = ["19-2-2015", "20-2-2015", "23-2-2015", "24-2-2015"]
function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if (jQuery.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}
$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

这是我的jsfiddle工作示例

给你。。。

我创建了一个函数，将字符串转换为日期

function compareDate(str1, sep){
var dt1   = parseInt(str1.split(sep)[0], 10);
var mon1  = parseInt(str1.split(sep)[1], 10);
var yr1   = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}

接下来，我创建了一个函数，它智能地为#to提供maxDate。

function setMaxDate()
{
    var date = $("#from").val();
    for(var i=0; i<unavailableDates.length; i++)
    {
    if(compareDate(date, "/")<compareDate(unavailableDates[i], "-")) 
        return compareDate(unavailableDates[i], "-");
    }
    return null;
}

并在日期选择器init 中进行一些修改

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
            $( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        maxDate: setMaxDate(),    // Added This
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

它奏效了。。这是正在工作的jsFiddle

相关文章：