jQuery Datepicker: Prevent closing picker when clicking a date

Question

Hi fellow stackoverflow:ers,

I'm using the jQuery Datepicker plugin, together with Martin Milesich Timepicker plugin. Everything works great, except for the fact that clicking a date in the datepicker, closes the widget, leaving no time to pick the time.

Question: So I'm wondering if there's a way to prevent the widget from closing when clicking a date, and instead force users to click the "Done" button (that shows up when enabling the "showButtonPanel: true" option), or clicking outside of the widget. I don't want my users having to open the widget twice! See the behavior online at the timepicker demo

Any help solving this issue, or even pointers in the right direction, is appreciated!

More info: I'm using the files supplied from Martins download link: http://milesich.com/tpdemo/timepicker-0.2.0.zip

• jquery-ui-1.7.2.custom.min.js
• timepicker.js (latest version 0.2.0)

These are the options I'm using:

$(document).ready(function(){
    $(".datepicker").datepicker({
        duration: '',  
        showTime: true,  
        constrainInput: false,  
        stepMinutes: 5,  
        stepHours: 1, 
        time24h: true,
        dateFormat: "yy-mm-dd",
        buttonImage: '/static/images/datepicker.png',
        buttonImageOnly: true,
        firstDay: 1,
        monthNames: ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'],
        showOn: 'both',
        showButtonPanel: true
     });
})

Answer 1

rather than changing the source it's best to use the existing events

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}

Answer 2

For reference, and since people have asked me this through mail. Here's a code chunk that needs to be added to timepicker.js:

/**
 * Don't hide the date picker when clicking a date
 */
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    $.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
}

Good luck in getting it working on your site!