unable to bind event to datetimepicker plugin

Question

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!

Answer 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...