5

我正在使用 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', ...)and $(document).on('dblclick', element, ...)。

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

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

4

3 回答 3

6

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

无论如何，这是一种解决方法，可以在您双击日期时关闭日期选择器。我使用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 或多或少敏感，只需使用它即可。

更新

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

于 2013-04-16T16:37:32.100 回答
0

下面的工作吗？

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

dblclick 文档。

于 2013-03-27T18:52:30.247 回答
0

编辑

live也可以在 jquery 1.7 或onjquery 1.9中尝试：

$('#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!');
});
于 2013-03-27T19:06:43.823 回答