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

how do you initialaze datepicker? – Alexander_F Sep 11 '10 at 11:11 — Alexander_F, Sep 11 '10 at 11:11

score 17 · Answer 1 · answered Nov 11 '11 at 02:10

17

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

answered Nov 11 '11 at 02:10

mbdev

6,343
14
46
63

score 6 · Accepted Answer · answered Sep 11 '10 at 11:12

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.

score 2 · Answer 3 · answered Nov 04 '11 at 17:21

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

For me this just opens the date picker again – mbdev Nov 11 '11 at 02:01 — mbdev, Nov 11 '11 at 02:01

peterblunt · Answer 4 · 2015-12-16T16:53:45.420

1

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.

edited Dec 16 '15 at 16:53

answered Dec 16 '15 at 16:32

peterblunt

11
2

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. – jupiteror May 20 '16 at 12:56
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. – peterblunt May 25 '16 at 12:18

score 0 · Answer 5 · answered Feb 18 '15 at 11:44

In order to work more then one time (try clicking multiple times on the input) you should use:

$("#datepicker").datepicker();    
$("#datepicker").mousedown(function() {
    var cond = $(this).data('datepicker').dpDiv.is(':visible');
    $(this).datepicker(cond ? 'hide' : 'show');
});

score 0 · Answer 6 · answered Jul 15 '19 at 14:40

In order to make this work on mobile you can first detect if device supports touch events (possible ways to do it) and than attach handler to corresponding event (touchstart or mousedown) based on the results:

var touchEvent = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? "touchstart" : "mousedown";
$(".datepicker").on(touchEvent, function(){
    $('#ui-datepicker-div').toggle();
})

score 0 · Answer 7 · answered Sep 05 '19 at 12:02

I was looking a solution for the same problem and based on the help I got here, I stumbled on an easier solution in regards to toggling datepicker. I know it's been a while since this question was created, but I'd still leave it here in case someone has a similar issue in the future.

$("#datepicker").datepicker();
$("#datepicker").mousedown(function() {
    $('.datepicker-dropdown').toggle();
});

Gosu Przmak · Answer 8 · 2019-11-07T11:56:40.910

I found the all the answers a bit not correct to what it should do, at least for me.

The marked correct answer looks like a piece of code that prevents you from tuning again the calendar, after closing, without losing focus from the input, and I'm pretty sure that is not something that should happen.

Here is the solution that worked for me.

html

 <p>Date: <input type="text" id="datepicker"></p>

js

var isCalendarOpen = false;
$("#datepicker").datepicker();
$("#datepicker").mousedown(function() {
    if(isCalendarOpen){
        $(this).datepicker("hide");                 
        isCalendarOpen = false;
        return;
    }
    isCalendarOpen = true;
    $(this).datepicker("show");  
});

https://jsfiddle.net/Przmak/jt4zgaf6/

jQuery Datepicker - close on input click

8 Answers8