unable to bind event to datetimepicker plugin

问题:

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.

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.

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

Thanks in advance for any help!

Edit: 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, ...).

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

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!

回答1:

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.

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

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);      }  }); 

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.

UPDATE

@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');          }); 

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

回答2:

Does the following work?

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

dblclick docs.

回答3:

Edit

try also live in jquery 1.7 or on in jquery 1.9 :

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

---

try to unbind a tag before binding it. maybe it bind with another function:

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

文章来源: unable to bind event to datetimepicker plugin