jQuery UI datepicker causes screen to scroll to the top after selecting a date

Question

I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from the datepicker the screen scrolls to the top. This only happens in IE8 not the Firefox 3.6 or Chrome 5. Since the majority of users will user IE this is going to be very annoying. Can anyone give me a clue as to why this is happening?

Here is a snippet of the HTML for the dialog:

 <div id="AppointmentDialog" style="display: none; font-size: 12px;">
    <table>
        <tr class="lesson notAvailable allDay">
            <td>
                Start
            </td>
            <td>
                <input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" />
                <input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" />
                <input id="hidStartTime" type="hidden" value="" />
            </td>
        </tr>
        <tr class="notAvailable allDay">
            <td>
                End
            </td>
            <td>
                <input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" />
                <input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" />
                <input id="hidEndTime" type="hidden" value="" />
            </td>
        </tr>
    </table>
</div>

Snippet of Javascript to initialise the dialog and datepickers:

$(document).ready(function() {
    initDialogs();
});

function initDialogs() {
    // Configure the New Appointment dialog
    $("#AppointmentDialog").dialog({
        autoOpen: false,
        resizable: false,
        width: 320,
        modal: true,
        title: 'Appointment',
        buttons: {
            "Close": function() { $(this).dialog("close"); },
            "Save": function() {
                // Function call
            }
        }
    });

    $.mask.definitions['h'] = '[012]';
    $.mask.definitions['m'] = '[012345]';
    $("#txtStartTime").mask("h9:m9");
    $("#txtEndTime").mask("h9:m9");

    // Init date pickers
    $("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' });
    $("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' });
};

EDIT

I'm using jQuery 1.4.2 and UI 1.8.2

Answer 1

I've looked into it again. The bug has been reported with a workaround.

I'm using a minified version of jQuery UI so the code looks like this:

(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>"

(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"

Answer 2

I had this exact problem, but the real issue turned out to be duplicate ids on the page. Once I removed the duplicate id the problem went away completely.

Answer 3

I wasn't allowed to touch js libraries, I added this line under onSelect handler.

$('#ui-datepicker-div table td a').attr('href', 'javascript:;');

so my code looked like

            $('#txtDate').datepicker({
                    // other properties
                    onSelect: function (selectedDate) {
                        $('#ui-datepicker-div table td a').attr('href', 'javascript:;');
                        // other code
                    }
                });