Question

I’m using two jQuery datepickers to select a dates range. Is there a way to select a whole week? This means that when opening the start datepicker, there will be two selection methods:

• Select a single start date (without affecting the end datepicker).
• Select a whole week (which would set the start datepicker to the first day of the week and then end datepicker to the last).

In asp calendar something similar can be done by setting the SelectionMode property to “DayWeek”, but I haven’t a way to achieve that in jQuery datepicker. Can it be done?

Answer 1

Here is I how ended up implementing this:

// A click on a week number cell in the weeks column of the start datepicker
$("td.ui-datepicker-week-col").live("click", function()
{
    // Simulate a click on the first day of the week
    $(this).next().click();

    // Grab the date, and set the end of the week in the end datepicker
    var fromDate = $("#inputStartDate").datepicker("getDate");    
    var toDate = fromDate;
    toDate.setDate(fromDate.getDate() + 6);
    $("#inputEndDate").datepicker("setDate", toDate);
});