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...

Solution 1

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.

Solution 2

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

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

Solution 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.

View more solutions

Comments

[mbdev]

For me this just opens the date picker again

[jupiteror]

Hi @peterblunt, thank you very much for your reply. It also works for me, but only without calling the function onClose. I have a question, is it possible to do the same for multiple datepickers? I have two datepickers on one page, as this code works only for the first one. I would really appreciate your reply.

[peterblunt]

Should work with all initiated datepicker inputs, having class 'myDatepickerInputs' (in this example). Tested it again – saying it works. Maybe it´s because you don´t use the 'onClose' option for calling 'addToggleListener'? Regards.