无法将事件绑定到datetimepicker插件

Question

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

但是,当双击日期时,我被要求关闭选择器.其他所有内容都保持不变,包括完成后关闭选择器的按钮等,只有他们想要双击才能工作.

我试图通过多种方式将双击事件绑定到日历日期(主要是变体$('.ui-datepicker-calendar a').bind('dblclick', function () {/*do something*/});)- 实际上,我也试图绑定其他事件 - 似乎没有任何效果.我已经尝试过如何发布的建议关闭DateTimePicker,双击无欢乐.

这甚至可能吗？我是否需要修改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', ...)(即使我知道它已被弃用)$(element).on('dblclick', ...)和$(document).on('dblclick', element, ...).

我也尝试过.stopPropagation(),.stopImmediatePropagation()即使我不相信这是传播问题.

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

Answer 1

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

无论如何,这是一个解决方法,以便在双击日期时关闭有效的datepicker.我使用onSelect函数回调:

看看演示

 $('#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或多或少敏感,那就玩吧.

UPDATE

@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() 希望它有帮助...