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

这是我的代码:

的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时会好起来)

消除此空白的最佳方法是什么?

最佳答案


原因:
这就是jQuery UI的设计方式。

  • 它使用魔数(Magic Number)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'
  • Rest由核心CSS负责。从ui-datepicker-multi-2ui-datepicker-multi-4都有样式,这些样式在%中具有预定义的宽度。这将使内部.ui-datepicker-group适应Javascript代码中计算的宽度,并应用于同一行(请参见上面的js代码)。如果您看到了核心CSS,则会发现样式最多只能使用4个月。如果月份数超过4,则不会将宽度应用于.ui-datepicker-group(尽管相关类是通过js应用的),因此它们不会扩展到容器的整个宽度。

  • 从行号333到341的jQuery UI v1.11.4 css:
    .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个月的所有可能性。根据您的用例,如果需要,添加更多的类。
    为了完整起见,下面是一个演示:
    片段:

    $("#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右侧的多余宽度?-LMLPHP
    然后,您最终将添加更多的替代来解决该问题,并可能会遇到更多问题。尝试保持清洁。

    10-06 04:31
    查看更多