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 d

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.

Answer 2

I have the same problem with FF 3.6.13, Jquery 1.5.0 delivered from the jquery CDN and jqueryui 1.8.9.

Extremely oddly, its only happening on SOME computers with the same version of firefox, with caches cleared.

This fix worked for me though. i.e.

$(".datepicker").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 2,
  showButtonPanel: true,
  onSelect: function() {
    $(".ui-datepicker a").removeAttr("href");
  }
});

The only issue is it now ignores the .change event. I fixed this by adding $(this).change():

$(".datepicker").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 2,
  showButtonPanel: true,
  onSelect: function() {
    $(".ui-datepicker a").removeAttr("href");
    $(this).change();
  }
});

$(".date_unix").datepicker({
  dateFormat: "@",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 2,
  showButtonPanel: true,
  onSelect: function() {
    $(".ui-datepicker a").removeAttr("href");
    $(this).change();
  }
});