Search code examples
jqueryjquery-pluginsdatetimepicker

Prevent timepicker addon from opening calendar


I asked the following in an old question:

I'm using the timepicker plugin for jquery. once users selected a date+time and click on the "Done" button, which basically just closes the dialog, i want the textbox where datetime is set to gain back focus (the current behavior of the plugin is to blur out focus). This is because on this page i have a set of textboxes and their tab orders are set sequentially. i need the datetime textbox to gain back focus to continue the tab order. otherwise the tab order will restart from the first text input which is inconvenient for the user.

I got back a working answer below

$('#MyDatepicker').datetimepicker({
   onClose: function(dateText, inst) {
     $('#MyDatepicker').focus();
  }
});

but this is my new challenge: now the textbox has its focus back, the calendar opens again. how do i prevent that?


Solution

  • So I was thinking about this one over the weekend after messing around with trying to get it to work, when I realized that maybe the best behavior is not to set focus back at all! Thinking about your users, once they have explicitly selected a date, why would they want focus back on the same field? So instead set focus to the next input.

    http://jsfiddle.net/QwQwN/

    $(function() {
        $(".date").datepicker({ });
    });
    
    $('.date').change( function() {
        $(this).nextAll('input:first').focus();
    });
    

    I tried using the onClose events of the date picker, but changing focus midstream broke the plugin. I dont think this is possible without modifying the actual plugin code.