jquery - jQuery DatePicker，日期的选择和间隔

Question

我正在尝试从所选日期起以 5 天的间隔选择日期。

我正在使用 beforeShowDay 方法，但我找不到获取 currentDate 并返回那些日子的自定义类（ current + 4 ）的方法。

Answer 1

我创建了一个jsFiddle来展示如何做到这一点。我在这篇SO 帖子中对 Yozomiri 的回答很挑剔

请注意，日期选择器实例仍将仅存储当前日期的单击日期。jQuery Datepicker 被设计为只允许选择一个日期。因此，您必须自己处理存储多个选定日期。

本质上：

$(function () {
    var $date = $('#date').datepicker({
        onSelect: function (dateText, inst) {
            var $picker = inst.dpDiv;
            var $allDates = $picker.find('table.ui-datepicker-calendar td'); // get all date elements

            //This is the important line.
            //Setting this to false prevents the redraw.
            inst.inline = false;

            //The remainder of the function simply preserves the 
            //highlighting functionality without completely redrawing.

            //This removes any existing selection styling.
            $picker.find('.ui-datepicker-current-day')
                .removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

            //This finds the selected link and styles it accordingly.
            //You can probably change the selectors, depending on your layout.
            $picker.find('a').each(function () {
                if ($(this).text() == inst.selectedDay) {
                    // Remove current selected date styles
                    $picker.find('.ui-datepicker-current-day')
                        .removeClass('ui-datepicker-current-day')
                        .children()
                        .removeClass("ui-state-active");
                    // td element of current date
                    var $selectedDate = $(this).parent();
                    // index of current date within all of the dates
                    var index = $allDates.index($selectedDate);
                    $allDates.slice(index, index + 5)
                        .addClass('ui-datepicker-current-day')
                        .find('a').addClass('ui-state-active');
                }
            });
            alert($date.datepicker('getDate')); // the clicked date
        }
    });
});