Как установить ширину JQuery UI DatePicker с несколькими месяцами

Question

Как настроить ширину элемента datepicker при показе нескольких месяцев? Я попытался изменить css для .ui-datepicker-group и .ui-datepicker-multi, но когда я смотрю его в Firebug, ширина перезаписывается.

Answer 1

Для будущих людей, у которых будет такой же вопрос:

Также можно использовать свойство "max-width":

.ui-datepicker{
  max-width: 1024px;
}

Вы также можете изменить размер шрифта, как сказал Awais, это хорошая идея. Последняя возможность поиграть с шириной - это использовать месяцы с несколькими столбцами в конфигурации JQuery UI datepicker.

Например:

$( "#datepicker" ).datepicker({
    numberOfMonths: [2,6] # 2: number of month per column, 6: number of columns
});

Это создаст 6 столбцов с 2 месяцами по столбцам, так что у вас будет 12 месяцев идеально отображенных на двух строках с правильно установленной шириной.

Answer 2

div.ui-datepicker{
 font-size:10px;
}

это вам поможет

Answer 3

Лучший способ изменить ширину независимо от того, что говорит CSS:

1. Найдите файл js, в котором есть устройство сбора данных (обычно jquery.ui.datepicker.js)
2. Найти

var origyearshtml, numMonths = this._getNumberOfMonths (inst) ...

1. Прямо под этой или той же линией вы заметите width = 17;
2. Измените его на предпочитаемую ширину.

это единственное решение, которое сработало для меня при использовании нескольких месяцев.

Answer 4

Я не думаю, что можно установить ширину. Ширина кажется жестко закодированной до 51em. Лучшее решение, которое я придумала, это изменить размер шрифта, пока не получу нужный размер.

Answer 5

Сохраните jquery-ui.js в вашем пакете разработки, найдите это

(inst.dpDiv.addClass ('ui-datepicker-multi-' + cols) .css ('ширина', здесь задайте ширину в пикселях или em, запомните '')

$("document").ready(function(){

    $(".ui-datepicker-inline").width("75em");
});

этот код работает, но при изменении указателя даты jquery-ui обновляет ширину, поэтому он работает только при первой загрузке.

Answer 6

Откройте файл javascript jQuery UI datepicker и измените переменную 'r'

_updateDatepicker: func...
...
r=17;

на число EM, которое вы предпочитаете.

Answer 7

Это сработало для меня. У меня есть этот скрипт внизу, над тегом закрытого тела:

<script type="text/javascript">
    $("document").ready(function(){

        $(".ui-datepicker-inline").width("75em");
    });
</script>

Answer 8

Это исправило это для меня

  .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    visibility: hidden;
     width:100% !important;
}

 .ui-datepicker-group {width:100% !important}`

Answer 9

Это сработало для меня. Конечно, вы можете установить любую ширину.

.ui-datepicker-multi {width:100% !important}

Answer 10

Я нашел решение этой проблемы; установите "минимальную ширину" для (встроенного) контейнера и групп.

Пример:

.ui-datepicker-inline { min-width: 1848px; }
.ui-datepicker-group { min-width: 308px; }

Встроенные стили ширины будут перезаписаны jQuery, но глобальное значение минимальной ширины будет отменять это значение ширины.

Примечание: вы также можете использовать этот трюк, чтобы рассчитать размер отклика с помощью javascript / jQuery. Установка ширины для контейнера и элементов группы не будет работать; они будут перезаписаны, когда средство выбора даты обновляется. Итак, создайте элемент стиля и введите правила CSS. Фрагмент jQuery:

var $myExampleCalendarParentContainer = jQuery('.your-selector-here');
var $style = $myExampleCalendarParentContainer.children('style');
var $calendarContainer = $myExampleCalendarParentContainer.find('.ui-datepicker-inline');
var $items = $calendarContainer.find('.ui-datepicker-group');
var monthWidth = 300; //desired pixel width per month

$style.html(
    '.ui-datepicker-inline { min-width:' + monthWidth * $items.length + 'px; }'
    + '.ui-datepicker-group { min-width:' + monthWidth + 'px; }'
);