如何在jQuery datepicker中禁用日期？

Question

I have 2 datepicker for filling checkin text box and checkout text box. I have to enable only checkin +13 days in checkout datepicker. What I tried is-

       $("#Chkin").datepicker({ dateFormat:  'dd/mm/yy', minDate: '+0', onClose: function (dateText, inst) {
            if ($("#ctl00_ContentPlaceHolder1_hdnDateformat").val() == "dd/mm/yy") {
                var parts = dateText.split("/");
                var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
            }
            else {
                var cin = new Date(dateText);
            }
            var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);           
            $("#Chkout").datepicker('option', 'minDate', cout).datepicker('show');
            showDays();
        } 
        });
        var cin = new Date($("#Chkin").val());
        var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);  
        var maxOut= new Date(cin.getDate()+13);
        $("#Chkout").datepicker({ dateFormat:  'dd/mm/yy', minDate: cout, maxDate: maxOut, onSelect: showDays });

Where I went wrong?

Answer 1

I was able to make it work using the following code. Note that I had to deviate a bit from your pasted code since I did not have access to the showDays function. Anyway the issue in your code was that while constructing the maxOut date object, you were using var maxOut = new Date(cin.getDate()+13), which would actually construct a date object using cin.getDate()+13 as the given year. I am also setting the maxdate option on the checkout datepicker in the onclose function. See the date constructor arguments at http://www.w3schools.com/js/js_obj_date.asp

$(function() {

$("#Chkin").datepicker({ dateFormat:  'dd/mm/yy', minDate: '+0', onClose: function (dateText, inst) {
    var cin = $(this).datepicker( "getDate" ); // this returns a date object, or null is nothing is selected.
    if(cin != null && cin != 'Invalid Date'){ // check for a valid date object, definitely can be done in a better way.
        var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
        var maxOut = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+13);

        $("#Chkout").datepicker('option', 'minDate', cout)
            .datepicker( "option", "maxDate", maxOut )
            .datepicker('show');

    }
} 
}); 


var cin = $("#Chkin").datepicker( "getDate" ); //new Date($("#Chkin").val());

if(cin != null && cin != 'Invalid Date'){ // check for a valid date object, definitely can be done in a better way.
    var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);  
    var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+13); 
    $("#Chkout").datepicker({ dateFormat:  'dd/mm/yy', minDate: cout, maxDate: maxOut});

}else{
    $("#Chkout").datepicker({ dateFormat:  'dd/mm/yy'});
}


}); 

Answer 2

I could sorted it finally. Here is the code-

$("#Chkin").datepicker({ dateFormat:  $("#ctl00_ContentPlaceHolder1_hdnDateformat").val(), minDate: '+0', onClose: function (dateText, inst) {
            if ($("#ctl00_ContentPlaceHolder1_hdnDateformat").val() == "dd/mm/yy") {
                var parts = dateText.split("/");
                var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
            }
            else {
                var cin = new Date(dateText);
            }
            var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1); 
            var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+14);
            $("#Chkout").datepicker('option', 'minDate', cout);
            $("#Chkout").datepicker('option', 'maxDate', maxOut);
            showDays();
        } 
        });
        var cin = new Date($("#Chkin").val());
        var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);   
        var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+14);
        $("#Chkout").datepicker({ dateFormat:  $("#ctl00_ContentPlaceHolder1_hdnDateformat").val(), minDate: cout, maxDate: maxOut, onSelect: showDays });

What I the changes i made are called the function option like this-

            $("#Chkout").datepicker('option', 'minDate', cout);
            $("#Chkout").datepicker('option', 'maxDate', maxOut);