Q:

jQuery UI Datepicker Range

I asked a pretty similar question a few days ago, but this one is different enough that I didn't feel like derailing the other helpful topic. I basically want to set up two text input fields and hook them both up with jQuery UI's Datepicker to have them act as a range... I want the second input field start date to be contingent upon what you've selected in the first input field. For instance if I select 10-25-2010 for the first field, then the earliest day you can select in the second field should be 10-26-2010. Any help or direction on this topic would be greatly appreciated!

A:

$(function() {

    $('#txtStartDate, #txtEndDate').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
    });

});

function customRange(input) {

    if (input.id == 'txtEndDate') {
        var minDate = new Date($('#txtStartDate').val());
        minDate.setDate(minDate.getDate() + 1)

        return {
            minDate: minDate

        };
    }

}​

crazy demo

A:

The jQuery UI datepicker documentation itself provides a nice example of how to link two datepickers to ensure valid date ranges.
See the example here: http://jqueryui.com/datepicker/#date-range
No extra plugin is needed, although if you wanted to create a simple one that would take the ids of the start and end date fields and plug in the necessary bits to the code hunk they give in the docs it would be pretty simple.

