jQuery datepicker- 2 inputs/textboxes and restricting range

Many thanks for your help Ben, I have built upon your posts and have come up with this. It is now complete and works brilliantly!

Here's a Working Demo. Add /edit to the URL to see the code

Complete Code below-

$(function () {       $('#txtStartDate, #txtEndDate').datepicker({        showOn: "both",        beforeShow: customRange,        dateFormat: "dd M yy",        firstDay: 1,         changeFirstDay: false    });});function customRange(input) {     var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date        dateMin = min,        dateMax = null,        dayRange = 6; // Set this to the range of days you want to restrict to    if (input.id === "txtStartDate") {        if ($("#txtEndDate").datepicker("getDate") != null) {            dateMax = $("#txtEndDate").datepicker("getDate");            dateMin = $("#txtEndDate").datepicker("getDate");            dateMin.setDate(dateMin.getDate() - dayRange);            if (dateMin < min) {                dateMin = min;            }        }        else {            dateMax = new Date; //Set this to your absolute maximum date        }                          }    else if (input.id === "txtEndDate") {        dateMax = new Date; //Set this to your absolute maximum date        if ($("#txtStartDate").datepicker("getDate") != null) {            dateMin = $("#txtStartDate").datepicker("getDate");            var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);            if(rangeMax < dateMax) {                dateMax = rangeMax;             }        }    }    return {        minDate: dateMin,         maxDate: dateMax    };     }

I realise I'm a little late to the party, but here is how I modified the working example code. I didn't need to set a specific maximum and minimum date, just didn't want a date range overlap, so I just let them set each other:

jQuery(function() {  jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', {    beforeShow: customRange  });});function customRange(input) {  if (input.id == 'calendardatetime_required_to') {    return {      minDate: jQuery('#calendardatetime_required_from').datepicker("getDate")    };  } else if (input.id == 'calendardatetime_required_from') {    return {      maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate")    };  }}

(My datepickers were already initialised in a script further up, but it's just default settings.)

Seems to do what I need it to :)

See here for my example.

Alright, how about this:

function customRange(input) {     var min = new Date(2008, 12 - 1, 1);    var dateMin = min;    var dateMax = null;    if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)    {        dateMax = $("#txtEndDate").datepicker("getDate");        dateMin = $("#txtEndDate").datepicker("getDate");        dateMin.setDate(dateMin.getDate() - 7);        if (dateMin < min)        {            dateMin = min;        }               }    else if (input.id == "txtEndDate")    {        dateMax = new Date();        if ($("#txtStartDate").datepicker("getDate") != null)        {            dateMin = $("#txtStartDate").datepicker("getDate");            dateMax = $("#txtStartDate").datepicker("getDate");            dateMax.setDate(dateMax.getDate() + 7);         }    }    return {     minDate: dateMin,      maxDate: dateMax   }; }

This is the best I could come up with that met all of your requirements (I think...)