Clever Geek Handbook

How to prevent jqery datepicker from showing up on initial page load, but still scroll to datepicker textbox

I have something similar to the following javascript:

$(function () {
    $("#txtDate").focus();
    $("#txtDate").datepicker({
        ...
        autoOpen: false,
        ...
    });
});

I want to focus on a textarea on page load without the datepicker popup appearing. The page is currently loading with the datepicker already installed.

I need the page to scroll to that textbox on page load and it would be nice if the txtDate textbox has focus so that users can easily navigate to the next input on the form.

Any help would be greatly appreciated.

EDIT:
NOTE: Needed to work in IE 8-10

+1


source to share


2 answers


Try the following:

var initialized = false;
$(function () {
    $("#txtDate").focus();
    $("#txtDate").blur(function(){
        if(!initialized){
            $("#txtDate").datepicker({
                autoOpen: false
            });    
            initialized = true;
        }
    });
});


Example

http://jsfiddle.net/pQALk/3/

+3


source


This jQuery works:

$(function () {
    $(".txtDate").focus();
    setTimeout(function() {$(".txtDate").datepicker({
        autoOpen: false
    });},10);
});


This is a bit of a hack - added a 0.01 second delay before the datepicker is bound, so the focus happens before the datepicker is bound, and therefore does not fire the datepicker. http://jsfiddle.net/pQALk/2/

+1


source






More articles:


All Articles