我正在对一个 div 使用 jquery UI 日期选择器,这样我就可以在屏幕上看到月份。问题是它似乎添加了一个比实际需要宽得多的宽度属性,这会创建这个额外的空白区域,如下所示
这是我的代码:
HTML
<div id="myCalendar"></div>
Javascript:
$("#myCalendar").datepicker({
numberOfMonths: 6,
showButtonPanel: false,
beforeShowDay: function (date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
if ($.inArray(dateString, highlightDateArray) > -1)
{
return [true, "highlightCell", ''];
}
else
{
return [true, '', ''];
}
}
});
通过查看 Firebug ,我明白了
element.style {
display: block;
width: 102em;
}
这比必要的要长得多(82em;会很好)
消除此空白的最佳方法是什么?
最佳答案
The issue is that it seems to add a width attribute that is much wider than it actually needs which creates this extra white space..
原因:
这就是 jQuery UI 的设计方式。
- 它使用魔数(Magic Number)
17
来计算容器的宽度。
来自 jquery UI v1.11.4 js
的代码,第 4561 到 4574 行:
var origyearshtml,
numMonths = this._getNumberOfMonths(inst),
cols = numMonths[1],
width = 17,
activeCell = inst.dpDiv.find( "." + this._dayOverClass + " a" );
if ( activeCell.length > 0 ) {
datepicker_handleMouseover.apply( activeCell.get( 0 ) );
}
inst.dpDiv.removeClass("ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4").width("");
if (cols > 1) {
inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em");
}
它检查列数(要显示的月份)是否超过 1
,并计算宽度为 (17 * cols) + 'em'
。
- 其余部分由核心 CSS 负责。有
ui-datepicker-multi-2
到ui-datepicker-multi-4
的样式,它们在%
中预定义了宽度。这会导致内部.ui-datepicker-group
适合在 Javascript 代码中计算并应用在同一行中的宽度(请参阅上面的 js 代码)。如果你看到核心 CSS,你会发现它的样式最多只有 4 个月。如果月数超过 4,则宽度不会应用于.ui-datepicker-group
(虽然相关类是通过 js 应用的),因此它们不会扩展到容器的整个宽度。
来自 jQuery UI v1.11.4 css
,行号 333 到 341:
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
您可以看到未定义 ...multi-5
及以后的类。
What is the best way of eliminating this white space?
推荐方案:
只需根据需要在您的自定义 CSS 中添加更多类。这是推荐的方式(也在此处的响应中建议:https://forum.jquery.com/topic/datepicket-problem-with-width-when-showing-multiple-months )。也是最干净的解决方案。
只需将以下行添加到您的自定义 CSS 中:
.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }
.ui-datepicker-multi-7 .ui-datepicker-group { width: 14.285%; }
.ui-datepicker-multi-8 .ui-datepicker-group { width: 12.5%; }
.ui-datepicker-multi-9 .ui-datepicker-group { width: 11.111%; }
.ui-datepicker-multi-10 .ui-datepicker-group { width: 10%; }
.ui-datepicker-multi-11 .ui-datepicker-group { width: 9.0909%; }
.ui-datepicker-multi-12 .ui-datepicker-group { width: 8.333%; }
这将处理长达 12 个月的所有可能性。如果需要,根据您的用例添加更多类。
为了完整起见,这里有一个演示:
片段:
$("#myCalendar").datepicker({ numberOfMonths: 5, showButtonPanel: false });
.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }
.ui-datepicker-multi-7 .ui-datepicker-group { width: 14.285%; }
.ui-datepicker-multi-8 .ui-datepicker-group { width: 12.5%; }
.ui-datepicker-multi-9 .ui-datepicker-group { width: 11.111%; }
.ui-datepicker-multi-10 .ui-datepicker-group { width: 10%; }
.ui-datepicker-multi-11 .ui-datepicker-group { width: 9.0909%; }
.ui-datepicker-multi-12 .ui-datepicker-group { width: 8.333%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="myCalendar"></div>
还有一个习惯性的 Fiddle:https://jsfiddle.net/abhitalks/u07kfLaa/1/
注意:不要试图更改或强行覆盖核心 jQuery-UI CSS(除非绝对不可避免)。这不是推荐的最佳实践。您可能会遇到意想不到的问题,例如就像下面的屏幕截图中可见的人工制品(以红色圆圈显示),当您强制组件 inline-block
时:
然后,您最终会添加更多的覆盖来解决这个问题,并可能会遇到更多问题。尽量保持清洁。
关于html - 如何删除 jquery UI datepicker 右侧的额外宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31491079/