我正在使用 this jQuery datepicker 和我正在尝试获取悬停日期的值。我看到插件有一个参数:
事件名称
触发日期选择器所需的事件。默认值:“点击”
由于文档非常有限，我想知道除了单击之外是否还有其他选项，如果没有，我如何使用 eventName 来获取悬停时的值。
最佳答案
eventName 选项仅用于将内部 show 方法绑定(bind)到事件:
$(this).bind(options.eventName, show);
理论上，您可以使用 hover 来显示日期选择器，但您必须为 eventName 指定 'mouseenter mouseleave'选项为 hover是绑定(bind)到 'mouseenter mouseleave' 的 jQuery 快捷方法。
因为您已经声明(在评论中)您想要在 kayak.co.in 处找到的行为，您可以仅通过在 .DatePicker 调用之后链接一个 mouseenter 处理程序来模仿这一点(不需要对其他任何内容进行更改):
$('#date').DatePicker({
// options...
}).on('mouseenter', '.datepickerDays td:not(.datepickerDisabled, .datepickerNotInMonth)', function (e) { // delegating on the mouseenter event which jQuery patches to be a cross-browser event, and only targeting clickable dates
var target = $(this).children('a'), // cache lookup
options = target.parents('.datepicker').data('datepicker'), // get DatePicker options
current = new Date(options.current), // grab the current month/year
val = parseInt(target.text(), 10), // grab the target date
hoverVal = new Date(current.getFullYear(), current.getMonth(), val), // make into an actual date
hoverDay = hoverVal.getDayName(), // get the short day name
hoverM = hoverVal.getMonth() + 1, // and month
hoverD = hoverVal.getDate(), // and date
hoverText = hoverDay + ' ' + (hoverD < 10 ? '0' + hoverD : hoverD) + '/' + hoverM, // for a formatted text value
selectedVal = new Date(options.date[0]), // get the selected date (which may just be the initial date without an actual selection or an actual selected date, hereafter "selected")
selectedDay = selectedVal.getDayName(), // get the short day name
selectedM = selectedVal.getMonth() + 1, // and month
selectedD = selectedVal.getDate(), // and date
selText = selectedDay + ' ' + (selectedD < 10 ? '0' + selectedD : selectedD) + '/' + selectedM, // for a formatted text value
startDate = $('#startDate').data('lastHovered') || new Date(hoverVal) || selectedVal, // default to: last hovered, current hover, or "selected" date (in that order)
endDate = $('#endDate').data('lastHovered') || new Date(options.date[1]) || startDate, // default to: last hovered, actual selected date, or "selected" date (in that order)
startDateSelected = $('#startDate').data('startDateSelected') || $('.datepickerDays .datepickerSelected.first').length > 0, // test whether an actual date was selected
endDateSelected = !isNaN(options.date[1]) && (options.date[1] - options.date[0] > 86400000), // test whether an end date was selected. end date is set in options when start date is actually selected and is the same day as the selected start date but the time is set to 23:59:59
selector; // variable to store a selector string
// no end date has been selectd AND if no start date has been selected, or if it has and the user is hovering over an earlier date, or if the user hasn't selected a date yet
if (!endDateSelected && (!startDateSelected || (startDateSelected && hoverVal < selectedVal) || hoverVal <= startDate)) {
selector = '#startDate'; // use the startDate input
$('#endDate').val(''); // since using startDate, endDate has not been selected. make sure the input is cleared.
} else if (!endDateSelected){ // otherwise, as long as no end date has been selected
selector = '#endDate'; // use the endDate input
$('#startDate').val(selText); // and set the value of startDate back to the actual selected date value
}
if (!endDateSelected) { // if the user hasn't picked an end date (which cannot be picked without a start date)
$(selector).data({ // persist the last hovered date and whether a start date has been selected
"lastHovered": hoverVal,
"startDateSelected": startDateSelected // this is necessary as the plugin routinely destroys and recreates the tables that make up the calendars while navigating the calendars
}).val(hoverText); // set the value of the input to the hovered date
}
});
工作演示:http://jsfiddle.net/QgXNn/5/
关于javascript - jQuery Datepicker - 在悬停时获取日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23772962/