[ACCEPTED]-jQuery Datepicker - Get date on hover-hover

The eventName option is only used to bind the internal 8 show method to an event:

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

You could, in theory, use 7 hover to show the datepicker but you'd have to 6 specify 'mouseenter mouseleave' for the eventName option as hover is a jQuery 5 shortcut method to bind to 'mouseenter mouseleave'.

Since you've 4 stated (in comments) that you want the behavior 3 found at kayak.co.in, you can mimic this merely by 2 chaining a mouseenter handler after the .DatePicker call (no 1 change needed to anything else):

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

Working demo: http://jsfiddle.net/QgXNn/5/

Try this approach:

Create a Div for your 10 hover target

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

On ready, initialize and bind 9 to hover event to open

$(function () {
    $('#datePicker').datepicker();
    $('#datePicker').hide();

    $('#content').hover(function () {
        $('#datePicker').fadeIn('fast');
    }, function () {
        $('#datePicker').fadeOut('fast');
    });

});

Fiddle (couldnt reference 8 your picker so i used JQuery UI)

Update: Check out the new Fiddle

I applied 7 my approach to your Fiddle. Now YOUR DatePicker 6 appears when you hover over "Hover 5 Me" and disappears whencursor leaves. I 4 added:

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

});

-

BTW, I made the DatePicker Dialog 3 disappear on non-hover just for effect. That 2 can easily be changed by removed the adjoining 1

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

See the edited working fiddle here, forked from yours.

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

0

For your question. I guess you dont want 22 the datepicker to shown on hover but want 21 the values or dates to be shown in the input 20 box on hover. If you want the datepicker 19 to be shown on hover try to use 'mouseover' for 18 eventName Attribute of the plugin Like this 17

$('.inputDate').DatePicker({
    eventName:'mouseover', // This is the event to fire.
    format:'m/d/Y',
    date: $('#inputDate').val(),
    current: $('#inputDate').val(),
    starts: 1,
    position: 'right'});

Its not taking the jquery events of hover.

Now 16 for showing the new date in the input tag 15 when the datepicker elements are hovered. You 14 may need to tweak the plugin itself try 13 to find this line 734. The code is

var cal = $(tpl.wrapper).attr('id', id).bind('click', click).data('datepicker', options);

Change 12 it to

var cal = $(tpl.wrapper).attr('id', id).bind('mouseover', click).data('datepicker', options);

As you can see I have used the old 11 mouseover event and not the jquery 'Hover' keyword. If 10 this works you can also try to add a new 9 options parameter in the plugin say 'callon:click' and 8 set this option when you call and pass it 7 to this line 734.

var cal = $(tpl.wrapper).attr('id', id).bind(options.callon, click).data('datepicker', options);

Using this you can set 6 your own events to call for updating the 5 value of the text box. It would surely 4 work for a single date picker. Please try 3 it and comment on this. But you may have 2 to manipulate more to set the date on click 1 as well.

Since the plugin already has bound the change functions 3 on a click, we can use that by attaching an event 2 for hover and simply triggering that. So something 1 like:

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()
    }
})

Example

By using jQuery and 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>

check demo 2 @: http://jsfiddle.net/renishar/ZVf48/4/

include jQuery and jQuery UI libraries 1 also..

You can use delegation on hover the dates 4 elments, if so force a click on the element 3 itself.

Code:

$("body").delegate(".datepickerDays td span","hover",function(e){
    $(this).click();
})

Since I can't let the plugin 2 works on newer versions of jQuery I have 1 to use delegate

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

Use eventName 'mouseover' instead of 'hover'

0