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?

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?

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker

Share Improve this question Follow edited Jul 30, 2011 at 21:04 Amit asked Jul 30, 2011 at 15:36 AmitAmit 1,18422 gold badges1515 silver badges2222 bronze badges 2

• How do you plan on indicating to the user that there are two selection modes? – Andrew Whitaker Commented Jul 30, 2011 at 21:06
• In asp calendar there is a column with arrows for selection (see here), so I thought of using the week numbers column. – Amit Commented Jul 31, 2011 at 9:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

Here's an example when both input fields can be clicked:

    $(document).ready(function(){
        // date picker for Export part
        $(".datePicker").datepicker(
                {
                    dateFormat: 'yymmdd',
                    showWeek: true,
                    firstDay: 1,
                    weekHeader: "",
                    showOtherMonths: true,
                    selectOtherMonths: true
                }
        ).focus(function(){
            // prevent focus event firing twice
            var $this = $(this);
            var now = +new Date();
            var lastClicked = $this.data("lastClicked");
            if (lastClicked && (now - lastClicked) < 100) {
                // Don't do anything
                return;
            }
            $this.data("lastClicked", now);

            var el = this;

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

                var selectedDate = $(el).datepicker("getDate");
                $("#inputStartDate").datepicker("setDate", selectedDate);
                var toDate = selectedDate;
                toDate.setDate(toDate.getDate() + 6);
                $("#inputEndDate").datepicker("setDate", toDate);
            });
        });
    });