Get full datepicker date when mouse hover it Jquery/Java-Script [duplicate]

Question

I want to get a full date in the form: 06/23/2014. Right now i am just getting the current date i.e 23.

Markup:

<label for="pickDate"/>
<input type="text" id="pickDate"/>

Script:

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

JsFiddle:

Date Picker on hover

Answer 1

You can use event delegation to attach the mouse enter to every dynamically appended days on the date picker.

Then you can get the hovered day text and the current month/year displayed.

Code:

var monthname = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

$(function () {
    $("#pickDate").datepicker();
    $("body").on("mouseenter", ".ui-state-default", function () {
        $("h1").text(monthname.indexOf($(".ui-datepicker-month").text()) + 1 + "/" + $(this).text() + "/" + $(".ui-datepicker-year").text());
    });
});

Demo: http://jsfiddle.net/IrvinDominin/LuS4C/

Answer 2

The date is available from each buttons data attributes if you use a current version of jQuery and jQuery UI, and not something that was deprecated five years ago.

$(function() {
    $("#pickDate").datepicker();
    $(document).on('mouseenter', 'td[data-handler="selectDay"]', function() {

        var day   = $(this).text();
        var month = $(this).data('month');
        var year  = $(this).data('year');

        $("h1").text( day + '/' + (month+1) + '/' + year );
    })
});

FIDDLE