如何删除jquery UI datepicker右侧的额外宽度？

Question

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

这是我的代码：

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, '', ''];
           }
        }
    });

从查看萤火虫，我看到了

element.style {
     display: block;
     width: 102em;
}

这比必要的时间长（在82em处有效;会没事的）

消除此空白区域的最佳方法是什么？

Answer 1

  

问题在于它似乎添加了更宽的宽度属性   比实际需要的还要创造这个额外的空白区域。

原因：

这是jQuery UI的设计方式。

1. 它使用幻数17来计算容器的宽度。

从行号4561到4574的jquery UI v1.11.4 js代码：

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'。

1. Rest由核心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及以后的类未定义。

  

消除此空白区域的最佳方法是什么？

推荐的解决方案：

只需在自定义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个月的所有可能性。根据您的使用情况，根据需要添加更多类。

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

代码段：

＆＃13;
＆＃13;
$("#myCalendar").datepicker({ numberOfMonths: 5, showButtonPanel: false });
＆＃13;
.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%; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

习惯性的小提琴：https://jsfiddle.net/abhitalks/u07kfLaa/1/

注意：不要尝试更改或强制覆盖核心jQuery-UI CSS（除非绝对不可避免）。这不是推荐的最佳做法。您可能会遇到意外问题，例如：比如下面的屏幕截图中显示的这个人工制品（以红圈显示），强制组件inline-block：



然后，你最终会添加更多的重击，并且可能会遇到更多问题。尽量保持清洁。

Answer 2

看起来jQuery UI设计对我有疏忽 - 我无法想到为什么会有额外的空白。正如您所说，窗口小部件的宽度固定为em，因此这不仅仅是display: block默认行为的问题。

在任何情况下，我们都可以通过以下步骤消除这些额外的空格：

1. 在datepicker小部件上设置display: inline-block和width: auto，使其宽度缩小以适合其内容。

2. 要删除浮动广告并使用inline-block定位（设置float: none和display: inline-block）。

3. 在datepicker小部件上设置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元素一起使用。