Question

我正在尝试从所选日期开始选择5天的日期。

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

Answer 1

我创建了一个jsFiddle，它将展示如何执行此操作。我在这个SO post

中回答了Yozomiri的回答

请注意，datepicker实例仍将仅存储当前日期的点击日期。 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
        }
    });
});

jQuery DatePicker，选择和日期间隔

1 个答案: