Я использую этот jQuery datepicker, и я пытаюсь получить значение даты при наведении. Я вижу, что у плагина есть параметр:
eventName
The desired event to trigger the date picker. Default: 'click'
Поскольку документация очень ограничена, мне интересно, есть ли другие опции, кроме клика, а если нет, как я могу использовать eventName, чтобы получить значение при наведении.
Параметр eventName используется только для привязки внутреннего метода show к событию:
$(this).bind(options.eventName, show);
Теоретически вы можете использовать hover для отображения datepicker, но вам нужно указать 'mouseenter mouseleave' для параметра eventName как hover - это метод ярлыков jQuery для привязки к 'mouseenter mouseleave'.
Поскольку вы заявили (в комментариях), что вы хотите, чтобы поведение находилось в kayak.co.in, вы можете имитировать это, просто связав обработчик mouseenter после вызов .DatePicker (никаких изменений не требуется ни для чего другого):
$('#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 для своей целевой цели
<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)
Я применил свой подход к вашей скрипке. Теперь YOUR DatePicker появляется, когда вы наводите курсор на "Hover Me" и исчезает, когда покидает курсор. Я добавил:
$(function () {
$('#date').hide();
$('#test').hover(function () {
$('#date').show();
}, function () {
$('#date').hide();
});
});
-
Кстати, я заставил Диалог DatePicker исчезать на не-зависании только для эффекта. Это можно легко изменить, удалив прилегающие
}, 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);
}
По вашему вопросу. Я думаю, вы не хотите, чтобы указатель даты отображался при наведении, но хотите, чтобы значения или даты отображались в поле ввода при наведении. Если вы хотите, чтобы datepicker отображался при наведении, попробуйте использовать "mouseover" для атрибута eventName для плагина Как этот
$('.inputDate').DatePicker({
eventName:'mouseover', // This is the event to fire.
format:'m/d/Y',
date: $('#inputDate').val(),
current: $('#inputDate').val(),
starts: 1,
position: 'right'});
Его не принимают события jquery hover.
Теперь для отображения новой даты во входном теге, когда элементы datepicker зависнут. Возможно, вам придется настроить плагин, попробуйте найти эту строку 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'. Если это работает, вы также можете попытаться добавить новый параметр в плагин, скажем "callon: click" и установите этот параметр, когда вы вызываете и передаете его в эту строку 734.
var cal = $(tpl.wrapper).attr('id', id).bind(options.callon, click).data('datepicker', options);
Используя это, вы можете настроить собственные события для вызова обновления текстового поля. Это, безусловно, будет работать для одного выбора даты. Пожалуйста, попробуйте и прокомментируйте это. Но вам, возможно, придется манипулировать больше, чтобы установить дату на клик, а также.
Поскольку плагин уже привязал функции change к 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()
}
})
Используя 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, я должен использовать delegate
Используйте eventName 'mouseover' вместо 'hover'
Как то, что я видел в необязательных параметров, заданных плагином DatePicker, там нет onHover функция для плагина.
Тем не менее, если у вас есть копия кода, который генерирует DatePicker, вы могли бы на самом деле добавить свой собственный метод .hover() в JQuery в плагине, чтобы вызвать, когда мышь входит в элемент/плагин.
Вот документация для метода .hover().