How do I get one jquery datepicker input to integrate with value of another?

Question

I have a form with 3 input fields that use jQuery's DatePicker plugin. The fields are #startdate, #enddate, and #raindate. I am using DatePicker's event function to get the #startdate and #enddate to work together so the #enddate cannot be before the #startdate. Both those fields are required, by the way. The #raindate field is not required. However, if the user wants to add a date here, I want it to be after the date selected in the #enddate. How do I do this? Here is the code I have for getting the startdate and enddate to work together:

function getDates() {
    var dates = $("#startdate, #enddate" ).datepicker({
        defaultDate: "+1d",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "startdate" ? "minDate" : "maxDate",
            instance = $( this ).data( "datepicker" );
            date = $.datepicker.parseDate(
                   instance.settings.dateFormat ||
                   $.datepicker._defaults.dateFormat,
                   selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
}

Is there a way to specify something like this?:

minDate: $(#enddate).val() + 1d

Answer 1

Yes there is an option called minDate and it also supports a lot more options.

To get all available options go to -

http://jqueryui.com/demos/datepicker/

Over there go to options tab.

The above can be achieved by following code -

  $('#raindate').datepicker({
    dateFormat: "dd M yy",
    beforeShow: customRange,
    //Your other configurations.
    });

  function customRange(input) {
   if (input.id == "raindate")
    {
    dateMin = new Date();
    if ($("#enddate").datepicker("getDate") != null)
    {
    dateMin = $("#enddate").datepicker("getDate");
    dateMin.setDate(dateMin.getDate() + 1); 
    }
    }
    return {
    minDate: dateMin
  }; 
}​