jQuery Datepicker - close on input click

I am开发者_如何学JAVA 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...

---

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

---

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.

---

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

---

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.

---

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

---

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

---

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

---

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/