jquery ui datepicker IE reload or jumps to the top of the page

Question

I am noticing this issue in IE 7 + 8

$('#event-start-date').datepicker({dateFormat:'DD MM dd yy',minDate:'-0d'});

When you pick the date in IE 7 or 8 the page goes to # and reloads the root page

I am using jquery 1.4.0 and ui 1.7.2

Answer 1

I've experienced the same issue with jquery 1.4.2 using IE7. This only happens to me when using a modal dialog box. The datepicker appears on the page just fine but selecting a date causes you to be redirected to the # fragment.

I found a fix that is workable if not desirable here: http://forum.jquery.com/topic/modal-dialog-with-datepicker

Basically you just tear the href off of the box on select:

.datepicker({ onSelect: function() { $(".ui-datepicker a").removeAttr("href"); } });

Or, if you are using the datepicker on content that is dynamically loaded and re-binding you may have to lose the class first:

$("#your_text_box_id").removeClass('hasDatepicker').datepicker({ onSelect: function() { $(".ui-datepicker a").removeAttr("href"); } });

Took me a while to find this because of the many other issues with jquery datepickers and IE, go figure.