javascript - 如何通过双击关闭 DateTimePicker

Question

我正在使用 jQuery DateTimePicker 插件(作者:Trent Richardson)，它只会在您选择日期和时间后关闭。然而，有些用户并不关心时间，他们希望日历在他们只选择日期后关闭。

我仅在选择日期后设法关闭了日历，但我需要实现双击而不是单击。我怎么做？ 这是我的代码:

$(jqCompletedEndID).datetimepicker({  
    ampm: true, 
    onSelect: function(){
       $(this).datepicker("hide"); $(this).blur();
    }
});

我知道 Javascript 中有一个 dblclick 事件，但不确定如何在此上下文中应用它。

谢谢!

Answer 1

我遇到了完全相同的问题/要求。我尝试了一些与 Alex 的解决方案非常相似的方法，但它不起作用，因为日期时间选择器似乎在选择一天时删除所有样式和事件绑定(bind)(我假设它正在重建，但尚未检查)，这使得它不可能要触发的 dblclick 事件。

我想出了一个不漂亮但确实有效的解决方案。您可以使用 datetimepicker 的 onSelect 事件来绑定(bind)几个处理程序，如下所示:

(假设 this._$input 是对正在使用的输入控件的 jQuery 引用)

this._$input.datetimepicker({
...
onSelect: function() {
    var self = this;
    setTimeout(
            function () {
                $('.ui-datepicker-current-day').bind('click', function () { self._$input.datepicker('hide'); });
                $('.ui-datepicker-current-day').bind('dblclick', function () { self._$input.datepicker('hide'); });
            },
            0
        );
}

您可能想知道为什么我同时绑定(bind)单击和双击，特别是考虑到我上面所说的双击不起作用。貌似在Chrome、FireFox、Safari、Opera中该事件会触发“click”事件，但在IE中会触发“dblclick”事件。此外，如果您想知道 setTimeout，它是必需的，因为在该方法完成之前不会构造弹出窗口，因此如果没有它执行，这些选择器将不会返回任何内容。

您肯定已经注意到，当单击当前选定的日期时，无论是否为双击的一部分，我的解决方案也会关闭选择器。这在我的例子中是有意的(我还在 beforeShow 事件中触发相同的逻辑来连接处理程序，因此单击当前选定的日期将始终关闭选择器)。在您的情况下，如果您希望它在双击时严格工作，我只能建议您跟踪点击之间的时间并确保它们在某个阈值内到达。