如何防止 jQuery datepicker 在初始页面加载时弹出但仍滚动到 datepicker 文本框

Question

I have something similar to the following Javascript:

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

I want to focus in on the textbox on page load without having the datepicker pop up. Currently the page loads with the datepicker already open.

I need to be able to have the page scroll to that textbox on page load and it would be nice for the txtDate textbox to have focus so that users can tab to the next input in the form easily.

Any help would be greatly appreciated.

EDIT:
NOTE: must work in IE 8-10

Answer 1

Try this:

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

Example

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

Answer 2

This jQuery works:

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

It's a bit of a hack - added a delay of 0.01 seconds before binding the datepicker, so the focus happens before the datepicker is bound and so doesn't trigger the datepicker. http://jsfiddle.net/pQALk/2/