jQuery datepicker悬停输出日期 [英] jQuery datepicker hover output date

查看:224
本文介绍了jQuery datepicker悬停输出日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用jQuery datepicker,我想显示用户当前悬停的日期。我有下面的代码(您也可以使用JSFiddle尝试代码, http://jsfiddle.net/JGM85/):

I am using jQuery datepicker and I want to display out the date that the user is currently hovering over. I have the code below (you can also try the code with JSFiddle, http://jsfiddle.net/JGM85/):

$(function() {
    $("#datepicker").datepicker();
    $(".ui-state-default").live("mouseenter", function() {
        $("h1").text($(this).text());
    });
});


目前当悬停在某个日期上时,日期的数量(即23) )被输出到h1标签。我想更改它,以便输出整个日期并将其存储在变量中。

​ Currently when hovering over a date, the number of the date (ie. 23) is outputed to the h1 tags. I want to change this so that it outputs the whole date and stores it in a variable.

任何有关此的帮助将不胜感激。

Any help with this would be appreciated.

推荐答案

这不是我做的最好的方式,因为我在jQuery UI Datepicker文档中找不到任何用于获取实际日期的文档,但是你走了:

It's not the best way I did it, because I found nothing in the jQuery UI Datepicker documentation for getting the actual Date, but here you go:

$(function() {
    $("#datepicker").datepicker();
    $(".ui-state-default").on("mouseenter", function() {
        $("h1").text($(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text());
    });
});

http://jsfiddle.net/JGM85/1/

第二个版本保存实际日期+之后提醒它:

The second version with saving the actual Date + alerting it afterwards:

$(function() {
    $("#datepicker").datepicker();
    $(".ui-state-default").on("mouseenter", function() {
        $("h1").text($(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text());
    var actualDate=$('h1').text();
        alert(actualDate);
    });
});

http://jsfiddle.net/JGM85/2/

更新:我之前有.live作为事件处理程序,但.live是否不推荐使用.on()是要去的方法。

UPDATE: I previously had .live as an event handler but .live is no deprecated and .on() is the method to go.

这篇关于jQuery datepicker悬停输出日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆