Disable setting of focus for jQuery UI datepicker

There is an option with the jQuery UI datepicker to only open the datepicker when a button image is clicked. See the following for an example:

http://jqueryui.com/demos/datepicker/#icon-trigger

The problem is that the focus is in the textfield as soon as the datepicker opens. Is it possible to disable the setting of the focus?

When using a page like the above on a mobile device like an iPhone, the keyboard pops up because the textfield gain开发者_开发问答s the focus. This is not really userfriendly since you have to close the keyboard to actually get to the datepicker and use it...

---

set input to ReadOnly

<input type="text" id="datePicker" readonly>

---

Achieved the desired result by setting datepicker showOn option to "none".

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

The datepicker implementation understands "focus", "button" and "both" values for the showOn option. The default is set to "focus". So technically passing any value other than these 3 should work. A word of caution though, once the default functionality is overridden, the onus of managing proper display of the date picker calendar lies on you.

---

If you make the input disabled the keyboard never pops up. Like...

    <input type="text" id="date_picker_field" name="date" disabled/>

---

This is an older question, but if you stumble on it looking for a solution to the same problem I believe the solution in modern browsers is to use inputmode="none" in the HTML input tag:

<input type="text" ... inputmode="none" />

I haven't tested it extensively, but it's worked well in Android with the setups I've used.

---

If you are using jQuery Mobile- then you'll probably want to check out some the mobile oriented datepickers out there. I am using the experimental jQueryUI mobile datepicker (from alpha 4) after trying out several of the others because we wanted a nice calendar view. It basically just adds a few css classes added on top of the existing datepicker. I am using the Edited version so it works as a popup. To prevent the keypad opening I simply add a jQuery blur event $this.blur() right after it receives focus before the picker is shown. The blur event happens fast enough that the keyboard never opens.

If not- You'll probably want to do the same thing. I'm not aware of a way to do it without editing the code though.

---

I've been experiencing the same problem on an application I am working on. I commented out these lines from my jQuery file to prevent it from automatically setting focus on the textfield immediately after clicking on my calendar icon. It worked for my application.

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}

---

I had the minified version v1.11.4 and in jquery-ui.min.js I found two times

datepicker._shouldFocusInput(t)&&t.input.focus()

I removed &&t.input.focus() and it works fine.

Also of interest might be:

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

Still looking for a fix without changing core files...

---

I experienced the same thing where keyboard / keypads pops up before I can pick a date while testing in mobile devices. I just added an attribute readonly="true" inside

However, be sure to edit CSS and specify cursor: pointer because it shows a question mark every time you hover in desktop view.

---

I found a workaround by disabling the input field with jQuery before open the datepicker and enable it after a 100ms:

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

Tested on Chrome and also with cordova on Android 5.1.1.

---

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});