如何删除 jquery UI 日期选择器右侧的额外宽度？

Question

我正在对 div 使用 jquery UI 日期选择器，因此我可以在屏幕上看到月份。问题是它似乎添加了一个比实际需要宽得多的宽度属性，从而创建了这个额外的白色space，如下所示

这是我的代码：

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；会很好）

消除这种白色的最佳方法是什么space？

Answer 1

对我来说这看起来像是 jQuery UI 设计疏忽 - 我想不出为什么会有额外的空白。正如您所说，小部件在 em 中具有固定宽度，因此这不仅仅是 display: block.

的默认行为问题

无论如何，我们可以通过以下步骤消除多余的空格：

在日期选择器小部件上设置 display: inline-block 和 width: auto，使其宽度缩小以适合其内容。
对于每个单独的日历元素，删除浮动并使用 inline-block 定位代替（设置 float: none 和 display: inline-block）。
在日期选择器小部件上设置 white-space: nowrap。这使所有月份都在一行中，防止它们换到第二行。

我们还需要对其中一些规则使用 !important 来让它们覆盖默认 jQuery UI 样式表中的规则。

这是最终结果的屏幕截图：

这是代码的现场演示：

$("#myCalendar").datepicker({
  numberOfMonths: 6,
  showButtonPanel: false
});

.ui-datepicker {
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: none !important;
    display: inline-block;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="myCalendar"></div>

和代码的 JSFiddle 版本：https://jsfiddle.net/cjpmyp1j/1/

附带说明一下，如果您因为无法在文档中包含样式表而计划设置内联样式 head，请考虑在您的文档中使用 scoped stylesheet jQuery UI 元素旁边的文档正文。

Answer 2

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 的设计方式。

它使用幻数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（，尽管相关的 class 是通过 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 及以后的 classes。

What is the best way of eliminating this white space?

推荐的解决方案：

只需在您的自定义 CSS 中根据需要添加更多 classes。这是推荐的方式（也在此处的响应中建议：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 个月的所有可能性。如果需要，根据您的用例添加更多 classes。

为了完整起见，这里有一个演示：

片段:

$("#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:

然后，您最终会添加更多覆盖来解决这个问题，并可能遇到更多问题。尽量保持干净。

如何删除 jquery UI 日期选择器右侧的额外宽度？

How can I remove the extra width to the right of jquery UI datepicker?

html

css

inline

jquery-ui-datepicker

uidatepicker

原因：

推荐的解决方案：