JQuery UI datepicker makes the screen scroll up after selecting a date

Question

I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from a datepicker, the screen scrolls up. This only happens in IE8 and not in Firefox 3.6 or Chrome 5. Since most users will be custom IE, this will be very annoying. Can someone let me know why this is happening?

Here is the HTML snippet 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> 

Javascript snippet for initializing 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 am using jQuery 1.4.2 and UI 1.8.2

Answer 1

I looked at it again. The error was with a workaround .

I am using a mini version of jQuery UI, so the code is as follows:

 (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 problem turned out to be duplicate identification on the page. As soon as I deleted the duplicate id, the problem completely disappeared.

Answer 3

You need to override the "$" placeholder with "jQuery" if the text contains "#"

Answer 4

I was not allowed to touch js libraries, I added this line to the 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 } });