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

Question

This question already has an answer here:

jQuery datepicker hover output date (1 answer)

Closed 9 years ago.

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

Answer 3

You'll need to build the date. You can use this code as reference...

function getToday() {
            var d = new Date();
            var month = d.getMonth() + 1;
            var day = d.getDate();

            var output = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;

            return output;
        }

Answer 4

Here is what you need:

var v = $('#pickDate').datepicker('getDate');

Now, you hava a javascript date object and you can use the standard functions found here to extract the parts of the date you need.

It would be something like:

if (v != null) {
     var d = (v.getMonth() + 1) + '/' + v.getDate() + '/' + v.getFullYear()
}

Answer 5

Everyone here loves doing the extra work it seems

 <script>
                $(function() {
             $( "#datepicker2" ).datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, yearRange: \'2013:2015\' }).val();

                      });
                       </script>';

This will get you enough options to mess with I hope.