Question

Right now, the End Date selection is disabled. I want to only enable this when a Start Date is selected.

if( $('#datepicker1').val().length === 0) {
    $('#datepicker2').datepicker("disable"); 
} else {
    $('#datepicker2').datepicker("enable");
}

This clearly does not work. If I insert value = ‘random date’ into my first input field, it works fine. I’m not too sure on how do this. Clearly not as easy as I had hoped.

My other problem, or hope, is to disable the dates including and before the first selection.
You know, pick Start Date, and every date before and said date for the next picker would be disabled. But that is a whole other problem.

Answer 1

You can use something like this:

var end = $('#end').datepicker();

// Defining a function, because we're binding this to two different events
function enableEnd() {
    end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
       .datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}

$('#start').datepicker({
    onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user

It’s not really a good idea to enable the datepicker in the second field only after the first has been filled in, because the user can still add things into the second field manually, and you lose the format validation usually offered by jQuery UI datepicker. Instead, we disable the second input element directly.

See it working here: http://www.jsfiddle.net/yijiang/KwhLw/

Also note that we’re using the input event here, because although it has less broad compatibility, is better than the usual methods used for keyboard event capturing. See a full discussion on this here: http://whattheheadsaid.com/tag/oninput