无法将事件绑定到datetimepicker插件

问题描述

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

I am using Trent Richardson's jQuery UI Timepicker. I know the plugin has been modified to override $.datepicker._selectDate so that the picker will stay open when a date is selected. That's great.

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

However, I have been asked to have the picker close when double-clicking a date. Everything else remains the same, including a button for closing the picker when done, etc., only they want the double-click to work as well.

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

I have attempted to bind the double-click event to calendar dates in several ways (mostly variations of $('.ui-datepicker-calendar a').bind('dblclick', function () {/*do something*/});) -- indeed, I have attempted to bind other events as well -- and nothing seems to work. I have tried the suggestions posted for How to close DateTimePicker with a double click with no joy.

这甚至有可能吗?我是否需要修改onSelect函数以区分单击和双击? (并且，当event.type未定义时如何?)我是否绑定到错误的元素? (我尝试在$('.ui-datepicker-calendar a')，$('#ui-datepicker-div')，$('#ui-datepicker-div .ui-datepicker-calendar a')以及许多其他变体上进行绑定.)

Is this even possible? Do I need to modify the onSelect function to distinguish between a click and a double-click? (And how, when event.type is undefined?) Am I binding to the wrong element? (I've attempted binds on $('.ui-datepicker-calendar a'), $('#ui-datepicker-div'), $('#ui-datepicker-div .ui-datepicker-calendar a'), and numerous other variations.)

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

For the sake of completeness, here's my code:

$('#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!');
});

在此先感谢您的帮助！

为了澄清起见，通过"... ... c5>的变化"，我的意思是我尝试了.live('dblclick', ...)(即使我知道它已被弃用)，$(element).on('dblclick', ...)和$(document).on('dblclick', element, ...)

For clarification, by "variations of ... .bind('dblclick', ...)" I meant that I tried .live('dblclick', ...) (even though I know it's deprecated) and $(element).on('dblclick', ...) and $(document).on('dblclick', element, ...).

即使我不认为这是传播问题，我也尝试了.stopPropagation()和.stopImmediatePropagation().

I have also attempted to .stopPropagation() and .stopImmediatePropagation() even though I do not believe this is a propagation issue.

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

I believe there is something in the datetimepicker plugin's code that is hijacking events in the calendar. Unfortunately, I have not yet been able to find it. Any insight is much appreciated!

推荐答案

在datetimepicker的源代码中，您可以看到作者在选择日期后使用hack来禁用关闭.他自称是不好的hack.

In datetimepicker's source, you can see author use an hack to disable closing when a date is selected. He calls it himself a bad hack.

无论如何，这是一种解决方法，可以在双击日期时关闭日期选择器.我使用onSelect函数回调:

Anyway, here is a workaround to able datepicker be closed when you double click on a date.I use onSelect function callback:

查看演示

 $('#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行为.我将其设置为500ms，但是如果您希望dblclick或多或少敏感，就可以使用它.

So, in some way, i simulate dblclick behaviour using a timeout. I set it to 500ms but just play with this if you wish your dblclick to be more or less sensitive.

更新

@JaredKnipp似乎在切换月份时将焦点设置为输入(无效???)，我没有足够的时间来详细检查它，对不起.作为一个简单的解决方法，您可以尝试按照以下代码段，将其添加到endDateTextBox onClose回调中:

@JaredKnipp It appears that focus is set to input when month is switched (unvalid???), i don't have enough time to check it in detail, i'm sorry. As a simple workaround, you could try following snippet, add it to endDateTextBox onClose callback:

         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()希望对您有所帮助...

Note that if you are using jq version prior to 1.8, you have to use $.data() not $._data() Hope it helps...

这篇关于无法将事件绑定到datetimepicker插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！