CODEWITHSUNDEEP
jquerymobilejquery-mobilejquery-ui-datepicker
black666
black666

Reputation: 3027

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 gains the focus. This is not really userfriendly since you have to close the keyboard to actually get to the datepicker and use it...

Upvotes: 22

Views: 37625

Answers (10)

Peter Bowers
Peter Bowers

Reputation: 3093

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.

Upvotes: 2

Mahendra Singh Yadav
Mahendra Singh Yadav

Reputation: 1

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

Upvotes: -2

Anurag Joshi
Anurag Joshi

Reputation: 235

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.

Upvotes: 3

Bjoerg
Bjoerg

Reputation: 1331

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.

Upvotes: 0

PiTheNumber
PiTheNumber

Reputation: 23542

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

Upvotes: 1

Walt
Walt

Reputation: 11

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();
}

Upvotes: 1

iamhonee
iamhonee

Reputation: 101

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.

Upvotes: 0

Michal Shulman
Michal Shulman

Reputation: 695

set input to ReadOnly

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

Upvotes: 46

user981971
user981971

Reputation: 79

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

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

Upvotes: 2

Danny C
Danny C

Reputation: 2980

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.

Upvotes: 1

Related Questions