CODEWITHSUNDEEP
jquery-ui-datepicker
Alekhya
Alekhya

Reputation: 15

Disable dates in a jquery datepicker dynamically

var birthDate;
$(function() {
    var currentDate = new Date();
    $("#BirthDate").datepicker({
        dateFormat: "mm/dd/yy",
        showOn: "button",
        buttonImage: "../Images/cal.gif",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        maxDate: currentDate,
        yearRange: "-90:+10",
        onSelect: function(dateText, inst) { birthDate = dateText;}
    });
});
$(function() {
    var currentDate = new Date();
    $("#MaritalStatusDate").datepicker({
        dateFormat: "mm/dd/yy",
        showOn: "button",
        buttonImage: "../Images/cal.gif",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        minDate: birthDate,
        maxDate: currentDate,
        yearRange: "-90:+10"
    });

});

In the above code I am trying to disable $("#MaritalStatusDate") dates based on the date selected in $("#BirthDate"). I am using the onSelect event in BirthDate to identify the selected date and I'm storing the value in a variable which is globally declared. Using the variable I have set the minDate in $("#MaritalStatusDate"). But the dates are not getting disabled based on minDate value. Do I need to change the date format while assigning the value to the variable? Can anyone please help me in doing this?

Upvotes: 1

Views: 10419

Answers (1)

William Niu
William Niu

Reputation: 15853

You can simply set the minDate for $('#MaritalStatusDate') in onSelect event. 

$("#BirthDate").datepicker({
    ...
    onSelect: function(dateText, inst) {
        $('#MaritalStatusDate').datepicker('option', 'minDate', dateText);
    }
});

See this in action: http://jsfiddle.net/william/2q7TN/.

Upvotes: 3

Related Questions