Question

我正在使用Trent Richardson的jQuery UI Timepicker。我知道插件已被修改为覆盖$ .datepicker._selectDate，以便选择日期时选择器将保持打开状态。那很好。

但是，双击日期时，我被要求关闭选取器。其他所有内容都保持不变，包括完成后关闭选择器的按钮等，只有他们希望双击才能正常工作。

我试图以多种方式将双击事件绑定到日历日期（主要是$('.ui-datepicker-calendar a').bind('dblclick', function () {/*do something*/});)的变体 - 实际上，我也试图绑定其他事件 - 似乎没有任何效果。我已经尝试过为How to close DateTimePicker with a double click发布的建议没有任何乐趣。

这甚至可能吗？我是否需要修改onSelect功能以区分单击和双击？（当event.type未定义时，如何？）我是否绑定了错误的元素？（我尝试过对$('.ui-datepicker-calendar a')，$('#ui-datepicker-div')，$('#ui-datepicker-div .ui-datepicker-calendar a')和许多其他变体进行绑定。）

为了完整起见，这是我的代码：

$('#date-range-from, #date-range-to').datetimepicker({
    changeYear: true,
    changeMonth: true,
    controlType: 'select',
    dateFormat: 'M dd, yy ',
    minDate: 'Jan 01, 2010 ',
    maxDate: 'Dec 31, xxxx '.replace('xxxx', new Date().getFullYear() + 1),
    showAnim: '',
    showMinute: false,
    showOtherMonths: true,
    showTime: false
}).on('change', function () {
    var t = $(this),
        date = t.val().slice(0, 12),
        fromto = t.attr('id').replace('date-range-', ''),
        time = t.val().slice(-5);
    dashboardOpts.dateRange[fromto].date = date;
    dashboardOpts.dateRange[fromto].time = time;
}).mousedown(function () {
    $('#ui-datepicker-div').toggle();
    $(this).blur();
});
$('#ui-datepicker-div .ui-datepicker-calendar a').bind('dblclick', function () {
    console.log('I just want to see if this event can be bound!');
});

提前感谢您的帮助！

修改：为了澄清，“.bind('dblclick', ...)的变体”我的意思是我尝试了.live('dblclick', ...)（即使我知道它已被弃用）和{{1 }和$(element).on('dblclick', ...)。

即使我不相信这是传播问题，我也尝试$(document).on('dblclick', element, ...)和.stopPropagation()。

我相信datetimepicker插件的代码中有一些东西正在劫持日历中的事件。不幸的是，我还没有找到它。非常感谢任何见解！

Answer 1

在datetimepicker的源代码中，您可以看到作者在选择日期时使用hack来禁用关闭。他称自己是一个糟糕的黑客。

无论如何，这是一个解决方法，当您双击日期时，可以关闭有效的datepicker。我使用onSelect函数回调：

SEE DEMO

 $('#mydatepicker').datetimepicker({
     onSelect: function (e, t) {
         if (!t.clicks) t.clicks = 0;

         if (++t.clicks === 2) {
             t.inline = false;
             t.clicks = 0;
         }
         setTimeout(function () {
             t.clicks = 0
         }, 500);
     }
 });

因此，在某种程度上，我使用超时模拟dblclick行为。我把它设置为500毫秒，但如果你希望你的dblclick更敏感或更不敏感，那就试试吧。

<强>更新

@JaredKnipp看来焦点设置为月份切换时输入（无效???），我没有足够的时间仔细检查它，对不起。作为一个简单的解决方法，您可以尝试以下代码段，将其添加到endDateTextBox onClose回调：

         var focusHandlers = $._data(endDateTextBox[0], "events").focus;
         $._data(endDateTextBox[0], "events").focus = {};
         endDateTextBox.one('focusin.datetimepicker mouseenter.datetimepicker', function () {
             setTimeout(function () {
                 $._data(endDateTextBox[0], "events").focus = focusHandlers;
                 endDateTextBox.blur();
             }, 0);
             $(this).off('focusin.datetimepicker mouseenter.datetimepicker');
         });

请注意，如果您使用1.8之前的jq版本，则必须使用$.data()而不是$._data()希望它有帮助......

Answer 2

以下是否有效？

$('#ui-datepicker-div .ui-datepicker-calendar a').dblclick(function () {
  console.log('I just want to see if this event can be bound!');
});

dblclick docs

Answer 3

修改

在jquery 1.7中尝试live或在jquery 1.9中尝试on：

$('#ui-datepicker-div .ui-datepicker-calendar a').live('dblclick', function () { alert('I just want to see if this event can be bound!'); });

在绑定之前尝试取消绑定a tag。也许它与另一个函数绑定：

$('#ui-datepicker-div .ui-datepicker-calendar a').unbind('dblclick'); $('#ui-datepicker-div .ui-datepicker-calendar a').bind('dblclick', function () { alert('I just want to see if this event can be bound!'); });

无法将事件绑定到datetimepicker插件

3 个答案: