Javascript jQuery Datepicker-悬停获取日期

我使用jQuery datepicker，并尝试获取悬停日期的值。我看到插件有一个参数：

eventName

触发日期选择器的所需事件。默认值：“单击”

---

由于文档非常有限，我想知道除了单击之外是否还有其他选项，如果没有，我如何使用

eventName

获取悬停值。

正如我在DatePicker插件提供的可选参数中看到的，插件没有onHover函数

但是，如果您有生成DatePicker的代码的副本，实际上可以在插件中添加您自己的jquery.hover（）方法，以便在鼠标进入元素/插件时触发

下面是.hover（）方法的文档

试试这种方法：

为悬停目标创建一个Div

<div id="content">
    <div id="test">Hover Me</div>
    <div id="datePicker"></div>
</div>

（无法引用您的选择器，因此我使用了JQuery UI）

---

更新：查看新的 我把我的方法运用到你的小提琴上。现在，当您将鼠标悬停在“悬停我”上时，您的日期选择器将出现，而当Ursor离开时，它将消失。我补充说：

$(function () {
    $('#date').hide();
    $('#test').hover(function () {
        $('#date').show();
    }, function () {
        $('#date').hide();
    });

});

-

顺便说一句，我让DatePicker对话框在非悬停状态下消失只是为了效果。可以通过移除相邻的

}, function () {
    $('#date').hide();

---

通过使用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>

jQuery（函数（$）{
$（“#日期选择器”）。日期选择器({
onSelect：功能（dat）{
$（'测试'）.val（dat）；
}
});
$（“#日期选择器”）.hide（）；
$（'#date_div'）。悬停（函数（）{
$（“#日期选择器”）.fadeIn（200）；
}，函数（）{
$（“#日期选择器”）。淡出（200）；
});
});

检查演示@：

---

还包括jQuery和jQuery UI库。

用于回答您的问题。我猜您不希望日期选择器显示在悬停状态，而是希望值或日期显示在悬停状态的输入框中。 如果您希望datepicker显示在悬停状态，请尝试对插件的eventName属性使用“mouseover” 像这样

$('.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事件

现在，当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);

使用此选项，您可以设置自己的事件以调用更新文本框的值。

---

对于一个单一的日期选择者来说，这肯定是可行的。请尝试一下并对此发表评论。但是您可能还需要进行更多操作来设置单击日期。

由于插件已经在

单击上绑定了
更改
功能，我们可以通过为
悬停
附加一个事件并简单地触发来使用它。比如：

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上工作，所以我不得不使用它

演示：
eventName
选项仅用于将内部
show
方法绑定到事件：

$(this).bind(options.eventName, show);

理论上，您可以使用
悬停
来显示日期选择器，但必须为
事件名
选项指定
'mouseenter mouseleave'
，就像绑定到
'mouseenter mouseleave'的jQuery快捷方式一样

由于您已经声明（在注释中）希望在中找到该行为，因此只需在调用
.DatePicker
后链接
mouseenter
处理程序（无需对任何其他内容进行更改）即可模拟该行为：

$（“#日期”）.DatePicker({
//选项。。。
}).on（'mouseenter'，'.datepickerDays td:not（.datepickerDisabled，.datepickerNotInMonth'），函数（e）{//将jQuery修补为跨浏览器事件的mouseenter事件委派，并且仅针对可单击的日期
var target=$（this）.children（'a'），//缓存查找
options=target.parents（'.datepicker'）.data（'datepicker'），//获取日期选择器选项
当前=新日期（options.current），//获取当前月份/年份
val=parseInt（target.text（），10），//获取目标日期
hoverVal=新日期（current.getFullYear（），current.getMonth（），val），//转换为实际日期
hoverDay=hoverVal.getDayName（），//获取短日名称
hoverM=hoverVal.getMonth（）+1、//和month
hoverD=hoverVal.getDate（），//和日期
hoverText=hoverDay+''+（hoverD<10？'0'+hoverD:hoverD）+'/'+hoverM，//用于格式化文本值
selectedVal=new Date（options.Date[0]），//获取所选日期（可能只是没有实际选择的初始日期，也可能是实际选择的日期，以下称为“已选择”）
selectedDay=selectedVal.getDayName（），//获取短日名称
selectedM=selectedVal.getMonth（）+1、//和month
selectedD=selectedVal.getDate（），//和日期
selText=selectedDay+''+（selectedD<10？'0'+selectedD:selectedD）+'/'+selectedM，//用于格式化文本值
startDate=$（“#startDate”）.data（'lastHovered'）| | | new Date（hoverVal）| | selectedVal，//默认为：上次悬停、当前悬停或“selected”日期（按该顺序）
endDate=$（“#endDate”）.data（'lastHovered'）| | new Date（options.Date[1]）| | startDate，//默认为：上次悬停、实际选定日期或“选定”日期（按该顺序）
startDateSelected=$（'#startDate'）。数据（'startDateSelected'）| |$（'.datepickerDays.datepickerSelected.first'）。长度>0，//测试是否选择了实际日期
endDateSelected=！isNaN（options.date[1]）&&（options.date[1]-options.date[0]>86400000），//测试是否选择了结束日期。开始日期时在选项中设置了结束日期
$("body").delegate(".datepickerDays td span","hover",function(e){
    $(this).click();
})

$(this).bind(options.eventName, show);

$('#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
    }
});

// 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);
}