How to close DateTimePicker with a double click

Question

I am using a jQuery DateTimePicker addon (By: Trent Richardson) and it will only close after you select the date AND the time. However some users don't care about the time and they want the Calendar to close after they choose the date only.

I managed to close the Calendar after picking the Date only but I need to implement a double click and not a single click. How do I do that? Here is my code:

$(jqCompletedEndID).datetimepicker({  
    ampm: true, 
    onSelect: function(){
       $(this).datepicker("hide"); $(this).blur();
    }
});

I know there is a dblclick event in Javascript but not sure how to apply it in this context.

Thank you!

Answer 1

I have run into the exact same problem / requirement. I tried something very similar to Alex's solution, but it doesn't work because the datetimepicker seems to wipe all styles and event bindings when a day is selected (I assume it's being reconstructed, but haven't checked), making it impossible for the dblclick event to fire.

I've come up with a solution which isn't pretty but does work. You can use the datetimepicker's onSelect event to bind a couple of handlers as follows:

(assuming this._$input is a jQuery reference to the input control being used)

this._$input.datetimepicker({
...
onSelect: function() {
    var self = this;
    setTimeout(
            function () {
                $('.ui-datepicker-current-day').bind('click', function () { self._$input.datepicker('hide'); });
                $('.ui-datepicker-current-day').bind('dblclick', function () { self._$input.datepicker('hide'); });
            },
            0
        );
}

You're probably wondering why I bind both click and double click, particularly in light of my claim above that double click won't work. It seems that in Chrome, FireFox, Safari, and Opera the event will trigger the "click" event, but in IE it will trigger the "dblclick" event. Also, if you're wondering about the setTimeout, it's required because the popup won't be constructed until after the method is finished, so those selectors won't return anything if executed without it.

You've no doubt noticed that my solution will also close the picker when the currently-selected date is clicked whether or not it's part of a double-click. This is intentional in my case (and I also trigger the same logic in the beforeShow event to wire the handler so clicking on the currently-selected date will always close the picker). In your case, if you want it to work strictly with double clicks, all I can recommend is that you track the time between clicks and make sure they arrive within some threshold.

Answer 2

Try this...

$('#datepicker').datepicker({
     //...
});


$('table.ui-datepicker-calendar a').bind('dblclick', function() {
   $('#datepicker').val();
});

Answer 3

You can add a doubleclick event handler on the html tag itself. You would be having a emtpy div for the datepicker, so modify it as

<div id="datepicker" ondblclick="close()"></div>

In the close() function write the code to hide the datepicker div.