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

I am using jquery UI datepicker against a div so I can see the months on my screen. 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 as seen below

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

here is my code:

这是我的代码:

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

from looking in firebug, I see

从我看到萤火虫,我明白了

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

which is way longer than necessary (having it at 82em; would be fine)

这比必要的时间更长(在82em时有效;会很好)

What is the best way of eliminating this white space?

消除这个空白区域的最佳方法是什么?

2 个解决方案

#1

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..

问题是它似乎添加了一个比实际需要宽得多的宽度属性,从而创建了额外的空白区域。

Reason:

This is the way jQuery UI has been designed.

这就是jQuery UI的设计方式。

1. It uses a magic number 17 to calculate the width of the container.

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

From the code of jquery UI v1.11.4 js at line numbers 4561 thru 4574:

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

It checks if the number of columns (months to show) are more than 1, and calculates the width as (17 * cols) + 'em'.

它检查列数(显示的月数)是否大于1,并将宽度计算为(17 * cols)+'em'。

2. Rest is taken care of by the core CSS. There are styles ui-datepicker-multi-2 thru to ui-datepicker-multi-4 which have predefined width in %. This causes the inner .ui-datepicker-group to fit within the width calculated in the Javascript code and applied in the same line (see js code above). If you see the core CSS, you will find that it is styled only for only upto 4 months across. If the number of months exceed 4, then the width is not applied to .ui-datepicker-group (although the relevant class is applied via js) and hence they do not expand to the entire width of the container.

休息由核心CSS处理。有ui-datepicker-multi-2到ui-datepicker-multi-4的样式,它们具有预定义的宽度%。这会导致内部.ui-datepicker-group符合Javascript代码中计算的宽度并应用于同一行(请参阅上面的js代码)。如果您看到核心CSS,您会发现它的样式最多只能持续4个月。如果月数超过4,则宽度不应用于.ui-datepicker-group(尽管相关类通过js应用),因此它们不会扩展到容器的整个宽度。

From jQuery UI v1.11.4 css at line numbers 333 thru 341:

从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%;
}

You can see that classes for ...multi-5 and beyond are not defined.

您可以看到未定义... multi-5及更高版本的类。

What is the best way of eliminating this white space?

消除这个空白区域的最佳方法是什么?

Recommended solution:

Simply add more classes as required in your custom CSS. This is the recommended way (also suggested in the response here: https://forum.jquery.com/topic/datepicket-problem-with-width-when-showing-multiple-months). And also the cleanest solution.

只需在自定义CSS中根据需要添加更多类。这是推荐的方法(在此处的响应中也有建议:https://forum.jquery.com/topic/datepicket-problem-with-width-when-showing-multiple-months)。也是最干净的解决方案。

Just add the following lines to your custom CSS:

只需将以下行添加到自定义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%; }

This will take care of all possibilities up to 12 months across. Add more classes if required, as per your use-case.

这将照顾长达12个月的所有可能性。根据您的使用情况,根据需要添加更多类。

For the sake of completeness, here is a demo:

为了完整起见,这是一个演示:

Snippet:

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

And a customary Fiddle: https://jsfiddle.net/abhitalks/u07kfLaa/1/

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

---

Note: Do not attempt to change or forcibly override the core jQuery-UI CSS (unless it is absolutely unavoidable). This is not a recommended best-practice. You may end up with unexpected problems, e.g. like this artefact (shown in red circle) visible in the screenshot below, when you force the components inline-block:

注意:不要尝试更改或强制覆盖核心jQuery-UI CSS(除非绝对不可避免)。这不是推荐的最佳做法。您最终可能会遇到意外问题,例如:像下面的屏幕截图中可见的这个人工制品(以红色圆圈显示),当您强制组件内联块时:

And then, you will end up adding more overrides fighting that and possibly get more problems. Try to keep it clean.

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

#2

It looks like a jQuery UI design oversight to me - I can't think of a reason why that extra whitespace would be intended. As you said, the widget has a fixed width in em, so this isn't just an issue of the default behavior of display: block.

它看起来像是一个jQuery UI设计监督我 - 我想不出为什么会有额外的空白。正如您所说,小部件在em中具有固定的宽度,因此这不仅仅是display:block的默认行为问题。

In any case, we can eliminate that extra whitespace with the following steps:

无论如何,我们可以通过以下步骤消除额外的空白:

1. Set display: inline-block and width: auto on the datepicker widget so its width shrinks to fit its contents.

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

2. To each individual calendar element, remove the float and use inline-block positioning instead (set float: none and display: inline-block).

   对于每个单独的日历元素,删除浮动并使用内联块定位(设置float:none和display:inline-block)。

3. Set white-space: nowrap on the datepicker widget. This keeps all the months on one line, preventing them from wrapping onto a second line.

   在datepicker小部件上设置white-space:nowrap。这使得所有月份保持在一条线上,防止它们包裹在第二条线上。

We will also need to use !important on a few of these rules to get them to override the rules from the default jQuery UI stylesheet.

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

Here is a screenshot of what the final result looks like:

以下是最终结果的截图:

---

Here is a Live Demo of the code in action:

这是代码的实时演示:

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

And a JSFiddle Version of the code: https://jsfiddle.net/cjpmyp1j/1/

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

---

As a side note, on the off-chance you were planning on setting inline styles because you are unable to include a stylesheet in your document head, look into using a scoped stylesheet in your document body alongside the jQuery UI element.

作为旁注,有可能您计划设置内联样式,因为您无法在文档头中包含样式表,请在文档正文中使用范围样式表以及jQuery UI元素。