How to disable dates in 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?

in your code at the end you have an extra }); likely from document.ready — abc123
– abc123, Commented Jul 18, 2013 at 15:46

Suketu Bhuta · Accepted Answer · 2013-07-18 17:15:17Z

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


});

edited Jul 18, 2013 at 17:15

answered Jul 18, 2013 at 16:02

Suketu Bhuta

2,0331 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nullability Over a year ago

An if-else block won't affect variable scope.

Suketu Bhuta Over a year ago

agreed, removed the previous post to make way for a proper answer.

Sandy · Accepted Answer · 2013-07-18 17:47:44Z

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);

Collectives™ on Stack Overflow

How to disable dates in jQuery datepicker?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related