How to use JQuery UI datepicker with bgIframe on IE 6

Question

I am trying to use the JQuery UI datepicker (latest stable version 1.5.2) on an IE6 website. But I am having the usual problems with combo boxes (selects) on IE6 where they float above other controls. I have tried adding the bgIframe plugin after declaring the datepicker with no luck.

My guess is that the .ui-datepicker-div to which I am attaching the bgIframe doesn't exist until the calendar is shown.

I am wondering if I can put the .bgIframe() command directly into the datepicker .js file and if so, where? (the similar control by kelvin Luck uses this approach)

Current code

$(".DateItem").datepicker({
showOn:"button",
... etc ...
});
$(".ui-datepicker-div").bgIframe();

Answer 1

This should be taken care of for you by default.

The iframe gets included by default in IE6 in the datepicker. The style for it, called ui-datepicker-cover that handles the transparency. The only time this isn't the case is in the old themeroller code the style wasn't in there.

Answer 2

I have noted Marc's comment that the ui-datepicker-cover style should handle this. In my case the right and bottom edges of the calendar would still show drop downs through them.

It looks like the size of the iFrame is initially being set by the following lines of code

if ($.browser.msie && parseInt($.browser.version, 10) < 7) // fix IE < 7 select problems
$('iframe.ui-datepicker-cover').css({ width: inst.dpDiv.width() + 4, height: inst.dpDiv.height() + 4 });

in the postProcess function.

This size is then reset each time the date is changed by the line

inst.dpDiv.empty().append(this._generateHTML(inst)).
find('iframe.ui-datepicker-cover').
css({ width: dims.width, height: dims.height });

My simplistic solution was to remove these two sets of code and fix the size of the cover style in the .css file

//if ($.browser.msie && parseInt($.browser.version, 10) < 7) // fix IE < 7 select problems
//    $('iframe.ui-datepicker-cover').css({ width: inst.dpDiv.width() + 4, height: inst.dpDiv.height() + 4 });

inst.dpDiv.empty().append(this._generateHTML(inst))//.    <=== note the // before the .
//find('iframe.ui-datepicker-cover').
//css({ width: dims.width, height: dims.height });

in css file set the width of .ui-datepicker-cover to 220px, height to 200px

Steve

Answer 3

i had something like this and to use the bgIframe plugin, just i put the bgiframe(); function inside onBeforeShow() datepicker's method

check it

$('#date').DatePicker({

format:'Y/m/d',

date: $('#date').val(),

current: $('#date').val(),

position: 'r',

onBeforeShow: function(){

    $('#date').DatePickerSetDate($('#date').val(), true);

    $('.datepickerContainer').bgiframe();

},

onChange: function(formated, dates){

    $('#date').val(formated);

    $('#date').DatePickerHide();

}

});

Answer 4

Hi! I worried very much due to the problem, too. The solution becomes the following.

$(".DateItem").datepicker({
  showOn:"button",
  beforeShow:function(){
    $('#ui-datepicker-div').bgiframe();
  },
  ... etc ...
});