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 th

Answer 1

Why all comments provide workaround? it is straigtfarword:

Use inline calendar with altField :)

    <input type="text" id="alternate" size="30" />
    <div id="datepicker"></div>

    <script>
       $("#datepicker").datepicker({
          altField: "#alternate"
       });
    </script>

check this fiddle: http://jsfiddle.net/menocomp/y2s662b0/1/

Answer 2

You will have to hack the datepicker yourself. This is the code it uses. If it is not inline it will hide when you select a date.

You could pass in your own onSelect method and quickly change the datePicker instance to be inline and then change it back without having to change the datepicker internals but it is a very hacky solution.

if (inst.inline)
        this._updateDatepicker(inst);
else {
      this._hideDatepicker(null, this._get(inst, 'duration'));
      this._lastInput = inst.input[0];
      if (typeof(inst.input[0]) != 'object')
      inst.input[0].focus(); // restore focus
      this._lastInput = null;
}

Answer 3

Following with what Emil suggested, I found a nicer and easier way to modify the widget to support a not closing widget on select event.

First, I added another property to the defaults dict on the widget:

closeOnSelect:true //True to close the widget when you select a date

Second, find this statement in the _selectDate method:

if (inst.inline)
        this._updateDatepicker(inst);
else {
        ...
    }

And change the condition to be like this:

var closeOnSelect = this._get(inst, "closeOnSelect");        
if (inst.inline || !closeOnSelect)
        this._updateDatepicker(inst);
else {
        ...
    }

Give it a try, it is working for me. I did it over the JQuery UI 1.8.5 version.