jQuery Datepicker - close on input click

Question

I am using jQuery Datepicker and I have a little problem.

If the datepicker is opened, and you click on the input field again, nothing happens. How can I change that.. the picker to be closed on input click if it is already opened ?

Thanks in advance...

Answer 1

I found a better way. hide seems to cause it not to open on further clicks. And blur causes the date picker to open a second later.

I used toggle:

$('.datepicker').mousedown(function() {
   $('#ui-datepicker-div').toggle();
});

Answer 2

Since it's bound to focus (by default), you can just bind your own .mousedown() handler and it won't interfere, like this:

$("#datepicker").datepicker();
$("#datepicker").mousedown(function() {
    $(this).datepicker("hide");    
});

You can give it a try here. I'm using mousedown because that's how it's close behavior is detected as well, so just being consistent to more future-proof this behavior.

Answer 3

Since I can't comment yet...

One annoying thing is since the datepicker uses focus, once you hide it, you can't show it again without blurring first and then focusing (so click somewhere else, then click in again).

I solved this by adding the following to Nick Craver's answer (inside the mousedown):

$(this).blur();

So it should look like this:

$("#datepicker").datepicker();
$("#datepicker").mousedown(function() {
    $(this).datepicker("hide");
    $(this).blur();
});

Answer 4

This works for me (console.log method is output for testing – remove for production):

// call addToggleListener function one time to init
addToggleListener( $('.myDatepickerInputs') );

// the function
function addToggleListener( elm )
{
    elm.off( 'mouseup' );

    elm.on( 'mouseup', function()
    {
        $(this).off( 'mouseup' );
        $(this).datepicker( "show" );

        console.log( "show" );

        $(this).on( 'mouseup', function()
        {
            $(this).off( 'mouseup' );
            $(this).datepicker( "hide" );
            addToggleListener( $(this) );

            console.log( "hide" );
        });
    });
}

Calling the function using the datepickers „onClose“ option:

onClose: function()
{
    addToggleListener( $(this) );
}

Tested with Google Chrome.