我正在使用这个jQuery日期选择器,并尝试在悬停时获取日期的值。 我看到插件有一个参数:
eventName
触发日期选择器所需的事件。 默认值:'click'
由于文档非常有限,我想知道除了点击之外是否还有其他选项,如果没有,如何使用eventName
在悬停时获取日期的值。
我正在使用这个jQuery日期选择器,并尝试在悬停时获取日期的值。 我看到插件有一个参数:
eventName
触发日期选择器所需的事件。 默认值:'click'
由于文档非常有限,我想知道除了点击之外是否还有其他选项,如果没有,如何使用eventName
在悬停时获取日期的值。
eventName
选项仅用于将内部的show
方法绑定到事件:
$(this).bind(options.eventName, show);
hover
来显示日期选择器,但你需要为eventName
选项指定'mouseenter mouseleave'
,因为hover
是一个jQuery快捷方法,绑定到'mouseenter mouseleave'
。由于你已经在评论中说明了你想要在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
}
});
<div id="content">
<div id="test">Hover Me</div>
<div id="datePicker"></div>
</div>
就绪时,初始化并绑定悬停事件以打开
$(function () {
$('#datePicker').datepicker();
$('#datePicker').hide();
$('#content').hover(function () {
$('#datePicker').fadeIn('fast');
}, function () {
$('#datePicker').fadeOut('fast');
});
});
Fiddle(无法引用您的选择器,所以我使用了JQuery UI)
我将我的方法应用于您的Fiddle。现在,当您悬停在“Hover Me”上时,您的日期选择器会出现,并且光标离开时消失。我添加了:
$(function () {
$('#date').hide();
$('#test').hover(function () {
$('#date').show();
}, function () {
$('#date').hide();
});
});
}, function () {
$('#date').hide();
// setting the value of the input field to hovered date
// Note that we're not triggering the "click" event bec.
// it will cause the onChange event of the datepicker to be fired.
// Instead, we're setting and resetting the input field value
$("body").on("mouseover", ".datepickerDays td", function (e) {
var d = parseInt($(this).text(), 10),
my = $(this).closest('table').find('.datepickerMonth span').html().split(', '),
m = $.inArray(my[0], MONTH_NAMES),
y = parseInt(my[1], 10),
date = new Date(y, m, d),
textbox = $('#startDate').hasClass('focus') ? $('#endDate') : $('#startDate');
textbox.val(getFormattedDate(date));
});
// We set back the input field back to its original value on mouseout
$("body").on("mouseout", ".datepickerDays td", function (e) {
var fd = $('#date').DatePickerGetDate(false),
start = getFormattedDate(fd[0]),
end = getFormattedDate(fd[1]);
$('#startDate').val(start);
$('#endDate').val(end);
});
// ----------------------------------------
// HELPER FUNCTIONS & VARS
// ----------------------------------------
var MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function pad0(num) { return num < 10 ? '0' + num : num; }
function getFormattedDate(date) {
if (isNaN(date.getTime())) { return ''; }
var wd = WEEKDAYS[date.getDay()].substr(0, 3);
return wd + ' ' + pad0(date.getDate()) + '/' + pad0(date.getMonth() + 1);
}
<kbd>
标签来样式化链接。这些标签用于表示用户输入,而不是超链接。 - James Donnelly$('.inputDate').DatePicker({
eventName:'mouseover', // This is the event to fire.
format:'m/d/Y',
date: $('#inputDate').val(),
current: $('#inputDate').val(),
starts: 1,
position: 'right'});
它没有接收到hover的jquery事件。
现在,当悬停在日期选择器元素上时,在输入标签中显示新日期。您可能需要调整插件本身并尝试找到第734行的代码。
var cal = $(tpl.wrapper).attr('id', id).bind('click', click).data('datepicker', options);
。
var cal = $(tpl.wrapper).attr('id', id).bind('mouseover', click).data('datepicker', options);
如您所见,我使用的是旧的mouseover事件而不是jQuery的'Hover'关键字。 如果此方法有效,您也可以尝试在插件中添加一个新的options参数,例如'callon:click',并在调用时设置此选项并将其传递到第734行。
var cal = $(tpl.wrapper).attr('id', id).bind(options.callon, click).data('datepicker', options);
由于插件已经绑定了click
函数,我们可以通过为hover
附加事件并简单地触发它来使用它。因此,代码如下:
function make_hover(){
$(".datepickerDays td span").hover(function(e){
$(this).trigger("click")
})
$(".datepickerDays td").mouseup(function(e){
$('#inputDate').DatePickerHide(); //hide it when click actually occurs
})
$(".datepickerContainer").mouseup(function(e){
setTimeout(function(){
make_hover()
},0) //have to run this with setTimeout to force it to run after DOM changes
})
}
var date=$('#inputDate').DatePicker({
format:'m/d/Y',
date: $('#inputDate').val(),
current: $('#inputDate').val(),
eventName: 'mouseenter',
onBeforeShow: function(){
$('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
make_hover()
},
onChange: function(formated, dates){
$('#inputDate').val(formated);
make_hover()
}
})
{{链接1:示例}}
通过使用jQuery和jQuery UI:
<div id="date_div">
<input type="text" id="test" placeholder="Hover Me"/>
<div id="datePicker"></div>
</div>
<script>
jQuery(function($) {
$('#datePicker').datepicker({
onSelect: function(dat){
$('#test').val(dat);
}
});
$('#datePicker').hide();
$('#date_div').hover(function(){
$('#datePicker').fadeIn(200);
}, function() {
$('#datePicker').fadeOut(200);
});
});
</script>
查看演示 @: http://jsfiddle.net/renishar/ZVf48/4/
也要包括 jQuery 和 jQuery UI 库。
您可以在悬停日期元素时使用委托,如果需要,强制单击元素本身。
代码:
$("body").delegate(".datepickerDays td span","hover",function(e){
$(this).click();
})
由于我无法让插件在更新的jQuery版本上工作,所以我必须使用{{link1:delegate
}}。
delegate
)是我需要添加的唯一代码块吗?因为它对我来说不起作用,还有其他我漏掉的更改吗? - eozzy$.curCss
。因此,使用1.7.x可以正常工作,而无需更改插件,它应该具有delegate
甚至on
。嗯。应该更新我的答案。 - mfirdaus使用eventName 'mouseover'代替'hover'
根据我所看到的DatePicker插件提供的可选参数,该插件没有onHover函数。
但是,如果您有生成DatePicker的代码副本,实际上可以在插件中添加自己的jquery .hover()方法,以在鼠标进入元素/插件时触发。
这里是.hover()方法的文档。
onChange
回调函数获取所选日期范围,但我还想在用户滚动每个日期时实时更新日期。 - eozzy