jQuery Datepicker - 获取悬停日期 [英] jQuery Datepicker - Get date on hover
问题描述
我正在使用这个 jQuery datepicker,我试图获得悬停日期。我看到插件有一个参数:
I'm using this jQuery datepicker and I'm trying to get the value of the date on hover. I see the plugin has a parameter:
eventName
触发日期选择器。默认值:'click'
由于文档非常有限,我想知道点击之外是否还有其他选项,如果没有,我可以使用 eventName
获取悬停值。
Since the documentation is very limited, I wonder if there're are other options besides click and if not, how can I use eventName
to get the value on hover.
推荐答案
eventName
选项仅用于将内部 show
方法绑定到事件:
The eventName
option is only used to bind the internal show
method to an event:
$(this).bind(options.eventName, show);
理论上可以使用 hover
显示datepicker,但您必须为 eventName
选项指定'mouseenter mouseleave'
为 hover
是一个jQuery快捷方式绑定到'mouseenter mouseleave '
。
You could, in theory, use hover
to show the datepicker but you'd have to specify 'mouseenter mouseleave'
for the eventName
option as hover
is a jQuery shortcut method to bind to 'mouseenter mouseleave'
.
由于您已经在(在评论中)声明您希望在 kayak.co.in ,你可以通过在之后链接一个
调用(不需要任何其他更改): mouseenter
处理程序, .DatePicker
Since you've stated (in comments) that you want the behavior found at kayak.co.in, you can mimic this merely by chaining a mouseenter
handler after the .DatePicker
call (no change needed to anything else):
$('#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
}
});
这篇关于jQuery Datepicker - 获取悬停日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!