Question

我正在使用jQuery Datepicker，我有一点问题。

如果打开了日期选择器，并再次单击输入字段，则不会发生任何事情。如何更改...如果已经打开了输入点击关闭的选择器？

提前致谢...

Answer 1

我找到了更好的方法。隐藏似乎导致它不能在进一步点击时打开。而模糊导致日期选择器稍后打开。

我用过切换：

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

Answer 2

由于它绑定到focus（默认情况下），您可以绑定自己的.mousedown()处理程序，它不会干扰，如下所示：

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

You can give it a try here。我正在使用mousedown，因为它也是如何检测它的近似行为，所以只是为了更加面向未来的这种行为。

Answer 3

因为我还不能评论......

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

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

$(this).blur();

所以看起来应该是这样的：

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

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

使用datepickers“onClose”选项调用该函数：

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

使用谷歌浏览器进行测试。

Answer 5

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

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

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

Answer 7

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

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

Answer 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/

jQuery Datepicker - 关闭输入点击

8 个答案: