jQuery datepicker- 2 inputs/textboxes and restricting range

Question

I am using the jQuery Datepicker widget with two input boxes, one for the "From" date and the second with the "To" date. I am using the jQuery Datepicker functional demo as a basis for getting the two input boxes to work with each other, but I need to be able to add these additional restrictions:

1. Date range can be no earlier than 01 December 2008

2. "To" date can be no later than today

3. Once a "From" date is selected, the "To" date can only be within a range of 7 days after the "From" date

4. If a "To" date is selected first, then the "From" date can only be within the range of 7 days before the "To" date (with the limit of 01 December being the first selectable date)

I can't seem to get all of the above working together.

In summary, I would like to be able to select a range of up to 7 days between 01 December and today (I realise I am posting this on 1st December so will only get today for the moment).

My code so far

$(function () {  $('#txtStartDate, #txtEndDate').datepicker(             {             showOn: "both",             beforeShow: customRange,             dateFormat: "dd M yy",             firstDay: 1,              changeFirstDay: false             }); });  function customRange(input)  {   return {          minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),          minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null),           maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)        };  } 

I'm missing the 7 day range restriction and also preventing a "To" date selection before 01 December 2008 or after today. Any help would be much appreciated, Thanks.

Answer 1

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     };      }