在Jquery DatePicker中禁用日期

时间:2014-01-24 17:48:38

标签: javascript jquery datepicker

我在DB Date值的指定范围内加载DatePicker。

HTML代码是:

<div id="datepicker"> Select the Dates:
    <input type="text" id="input1" >
    <input type="text" id="input2">
</div>

JQuery代码:

var date1 = new Date(Date.parse(SSD));
var date2 = new Date(Date.parse(SED));

$("#input1").val($.datepicker.formatDate($.datepicker._defaults.dateFormat, date1));
$("#input2").val($.datepicker.formatDate($.datepicker._defaults.dateFormat, date2));

$("#datepicker").datepicker({
    defaultDate: date1,
    beforeShowDay: function (date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function (dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        if (!date1 || date2) {
            $("#input1").val(dateText);
            $("#input2").val("");
            $(this).datepicker("option", "minDate", dateText);
        } else {
            $("#input2").val(dateText);
            $(this).datepicker("option", "minDate", null);
        }
    }
});

它显示了此范围内的日历。但现在的要求是最终用户不能超过指定的日期。用户只能在指定范围内选择。用户无法导航超出范围。 我对jquery有点新意,请建议。

1 个答案:

答案 0 :(得分:1)

您希望使用以下内容限制最短和最长日期:

$( ".selector" ).datepicker({ minDate: new Date(), maxDate: "+1m +1w" } })

有关详细信息,请参阅minDatemaxDate文档。