Как удалить дополнительную ширину справа от jquery UI datepicker?

Я использую jQuery UI datepicker против div, чтобы я мог видеть месяцы на моем экране. Проблема заключается в том, что он, кажется, добавляет атрибут ширины, который намного шире, чем требуется на самом деле, что создает дополнительное лишнее пространство, как показано ниже.

enter image description here

вот мой код:

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, будет хорошо)

Каков наилучший способ устранения этого пробела?

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что он, кажется, добавляет атрибут ширины, который намного шире чем на самом деле нуждается, что создает дополнительное лишнее пространство.

Причина:

Таким образом был разработан пользовательский интерфейс jQuery.

  • Он использует магическое число 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'.

  1. Отдых основывается на основном 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 месяцев. Добавьте дополнительные классы, если это необходимо, в соответствии с вашим прецедентом.

Для полноты, вот демонстрация:

Фрагмент:

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

Ответ 2

Похоже, что проект JQuery UI проектируется для меня - я не могу придумать, почему это дополнительное пространство будет предназначено. Как вы сказали, виджет имеет фиксированную ширину в em, поэтому это не просто проблема поведения по умолчанию display: block.

В любом случае мы можем устранить лишние пробелы со следующими шагами:

  • Установите display: inline-block и width: auto в виджет datepicker, чтобы его ширина сжималась, чтобы соответствовать его содержимому.

  • Для каждого отдельного элемента календаря удалите float и вместо этого используйте позиционирование inline-block (установите float: none и display: inline-block).

  • Установите white-space: nowrap в виджет datepicker. Это удерживает все месяцы на одной линии, не позволяя им обертывать вторую строку.

Мы также должны будем использовать !important в нескольких из этих правил, чтобы заставить их переопределить правила из таблицы стилей jQuery по умолчанию.

Вот скриншот того, как выглядит конечный результат:

Final Result Screenshot

Ниже приведено Live Demo кода в действии:

$("#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="#" onclick="location.href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'; return false;" 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>