我正在尝试从所选日期开始选择5天的日期。
我正在使用beforeShowDay方法,但我找不到获取currentDate的方法并返回那些天的自定义类(当前+4)。
答案 0 :(得分: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
}
});
});