jQuery DatePicker - selecting a whole week

问题

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?

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

回答2:

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

来源：https://stackoverflow.com/questions/6884175/jquery-datepicker-selecting-a-whole-week