jQuery Datepicker - 输入点击关闭答案

【问题标题】：jQuery Datepicker - close on input clickjQuery Datepicker - 输入点击关闭
【发布时间】：2010-09-11 11:03:59
【问题描述】：

我正在使用jQuery Datepicker，但我遇到了一个小问题。

如果打开日期选择器，然后再次单击输入字段，则不会发生任何事情。我该如何更改..如果选择器已经打开，则在输入单击时关闭它？

提前谢谢...

【问题讨论】：

如何初始化日期选择器？

标签： jquery uidatepicker

【解决方案1】：

我找到了更好的方法。 hide 似乎导致它无法在进一步点击时打开。并且模糊会导致日期选择器在一秒钟后打开。

我使用了切换：

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

【讨论】：

【解决方案2】：

由于它绑定到focus（默认），你可以绑定你自己的.mousedown()处理程序，它不会干扰，像这样：

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

You can give it a try here。我正在使用mousedown，因为这也是检测它的接近行为的方式，所以只要保持一致，就可以更加适应未来的这种行为。

【讨论】：

【解决方案3】：

因为我还不能评论...

一个烦人的事情是，由于日期选择器使用焦点，一旦你隐藏它，你不能再次显示它而不先模糊然后聚焦（所以点击其他地方，然后再次点击）。

我通过将以下内容添加到 Nick Craver 的答案（在 mousedown 内）解决了这个问题：

$(this).blur();

所以它应该是这样的：

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

【讨论】：

对我来说，这只是再次打开日期选择器

【解决方案4】：

这对我有用（console.log 方法是输出用于测试 - 删除用于生产）：

// 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" );
        });
    });
}

使用日期选择器“onClose”选项调用函数：

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

使用谷歌浏览器测试。

【讨论】：

嗨@peterblunt，非常感谢您的回复。它也适用于我，但只是不调用函数 onClose。我有一个问题，是否可以对多个日期选择器执行相同的操作？我在一页上有两个日期选择器，因为此代码仅适用于第一个。非常感谢您的回复。
应该使用所有已启动的日期选择器输入，具有类“myDatepickerInputs”（在本例中）。再次测试它 - 说它有效。也许是因为你不使用'onClose'选项来调用'addToggleListener'？问候。

【解决方案5】：

为了工作不止一次（尝试多次点击输入），您应该使用：

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

【讨论】：

【解决方案6】：

为了使这项工作在移动设备上运行，您可以首先检测设备是否支持触摸事件 (possible ways to do it)，然后根据结果将处理程序附加到相应的事件 (touchstart 或 mousedown)：

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

【讨论】：

【解决方案7】：

我一直在寻找相同问题的解决方案，根据我在这里获得的帮助，我偶然发现了一个关于切换日期选择器的更简单的解决方案。我知道这个问题已经有一段时间了，但我还是会把它留在这里，以防将来有人遇到类似的问题。

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

【讨论】：

【解决方案8】：

我发现所有的答案都不太正确，至少对我来说是这样。

标记的正确答案看起来像一段代码，可防止您在关闭后再次调整日历，而不会失去输入的焦点，我很确定这不应该发生。

这是对我有用的解决方案。

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/

【讨论】：