1

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();

4

4 回答 4

1

默认情况下，这应该为您处理好。

iframe 默认包含在 IE6 的 datepicker 中。它的样式，称为 ui-datepicker-cover 处理透明度。唯一不是这种情况的情况是在旧的 themeroller 代码中没有样式。

于 2008-10-01T16:59:40.703 回答
1

由于这个问题，我也很担心。解决方案变为以下。

$(".DateItem").datepicker({
  showOn:"button",
  beforeShow:function(){
    $('#ui-datepicker-div').bgiframe();
  },
  ... etc ...
});
于 2010-10-27T14:21:03.983 回答
0

我注意到 Marc 的评论，即 ui-datepicker-cover 样式应该处理这个问题。在我的情况下，日历的右边缘和下边缘仍会显示下拉菜单。

看起来 iFrame 的大小最初是由以下代码行设置的

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 });

在 postProcess 函数中。

每次更改日期时都会重置此大小

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

我最简单的解决方案是删除这两组代码并修复 .css 文件中封面样式的大小

//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 });

在 css 文件中设置 .ui-datepicker-cover 的宽度为 220px，高度为 200px

史蒂夫

于 2008-10-06T10:37:30.287 回答
0

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();
}
});
于 2010-03-08T20:18:45.043 回答