jQuery UI Datepicker Slow On IE6

Internet Explorer 6 is, unfortunately, still is widely used in corporate environments. I’ve found the jQuery UI (1.7.2) Datepicker too slow on IE6, taking several seconds to display, and another few seconds to hide.

Looking for a solution, I’ve found this thread, suggesting it’s an IE6 bug that caused it to load the same background images dozens of times. The suggested solution, however, didn’t work for me. I came up with a slightly better solution. Simply add this CSS rule to prevent the background images from loading in IE6:

* html .ui-datepicker tbody a {background-image:none !important;}

The next step is to disable animation. The date picker has many elements – animating them is too much work for IE6, resulting in the animation not showing at all – but still delaying the calendar. Wonderful. The solution is to disable the animation for IE6 by setting its duration to 0. You may also want to set the animation to null, because some animations ignore the zero duration. This is done for IE6 only, as there is no need to penalize modern browsers.

$('input.Calendar').datepicker({
           showAnim: jQuery.support.boxModel ? 'drop' : null, // optional
           duration: jQuery.support.boxModel ? 'normal' : ''
        });
Advertisements

6 thoughts on “jQuery UI Datepicker Slow On IE6

  1. This doesn’t work for me.
    Where/which file to put?:
    * html .ui-datepicker tbody a {background-image:none !important;}

  2. While the fixes above speed up datepicker somewhat in ie6, it turns out the main reason many people find datepicker is slow in ie6 is due to a memory leak that was fixed in SP2. Each time a datepicker is opened, it chews up memory until the browser is restarted.
    There is no fix for this problem, unfortunately, and one can only hope we can be rid of that garbage browser some day soon.

    I’d cite this information but it was buried somewhere in the jQuery tracker.

    Oh, incidentally, the memory leak is caused by the method jQuery uses to make DOM insertions.

  3. Hi,
    This solution worked perfect for me:

    1 – Turn on background image caching. This will load images before the datepicker is shown:

    try {
    document.execCommand(“BackgroundImageCache”, false, true);
    } catch(exception) {
    // other browsers do nothing
    }

    2 – Turn off animations. Things won’t look as nice, but performance is what matters:

    $(“#datepicker”).datepicker( { showAnim: ” });

    source: http://stackoverflow.com/questions/2991439/jquery-ui-datepicker-performance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s