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

问题

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

回答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.

回答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();
  }
});

来源：https://stackoverflow.com/questions/2193169/jquery-ui-datepicker-ie-reload-or-jumps-to-the-top-of-the-page

标签

internet-explorer

jquery-ui

datepicker