Ширина средства выбора даты jQuery

Я не понимаю, почему это так сложно сделать. Все в jQuery очень просто. Как вы устанавливаете ширину jQuery «display: inline;» Датапикер?

Я редактировал jquery ui css, но как только я меняю месяц, он сбрасывает ширину.

Я надеюсь, что это просто что-то глупое, что мне не хватает.


jquery-ui jquery-ui-datepicker
person Greg    schedule 21.11.2011    source источник

Ответы (3)


arrow_upward
23
arrow_downward

Если вы используете средство выбора даты jQuery в его форме по умолчанию, просто добавьте это в свой css, и он должен работать:

.ui-datepicker {
width: 17em; /*what ever width you want*/
}
person Kishore    schedule 21.11.2011
comment
Я отменил изменения в CSS пользовательского интерфейса jQuery, это было просто для эксперимента. - person Greg; 21.11.2011
comment
по-прежнему не изменяет автоматически волшебным образом размер шрифта, когда он слишком мал... (ворчать, ворчать, ворчать) - person Greg; 01.12.2011
comment
@Kishore- У меня та же проблема. Здесь я использовал ваш код, но меняются только границы. Календарь не меняется. - person Niths; 25.03.2013
comment
@Nithu, извините, что вы подразумеваете под календарем, не изменилось - person Kishore; 26.03.2013
comment
@Kishore-Проверьте также мой ответ - person Niths; 26.03.2013
comment
Я добавил код после файла jquery-ui css, и он отлично работает. - person Jubayer Arefin; 02.09.2013

arrow_upward
11
arrow_downward

Уменьшение размера шрифта календаря уменьшит ширину средства выбора даты.

Вы можете уменьшить размер шрифта, добавив этот css:

div.ui-datepicker
{
    font-size:10px;
}
person Niths    schedule 26.03.2013
comment
Да, это лучшее решение в данном случае. Его унаследованный размер шрифта определяет размер виджета, уменьшение шрифта уменьшает размер календаря. - person ekerner; 18.08.2014

arrow_upward
0
arrow_downward

Я решил эту проблему, используя оболочку и установив класс CSS, чтобы встроенный указатель даты имел ширину 100% от его родителя, поэтому, когда вы помещаете указатель даты, например, в .col, виджет настраивается к ширине своего родителя при изменении ширины строки, до предела, конечно, но приемлемо. Это было полезно для меня, чтобы использовать внутри бутстрапа .col, и ширина будет реагировать.

<div style="width:30vw;">
 <div id="mydatepicker"></div>
</div>

<script type="javascript">
 $('#mydatepicker').datepicker();
</script>

<style>
 .ui-datepicker.ui-datepicker-inline {
   width: 100% !important;
 }
</style>

Конечно, вы можете поместить стиль в файл CSS вашего сайта, но всегда после стилей jQuery-ui.

Протестируйте фрагмент, изменяющий ширину #mydpcontainer

$('#mydatepicker').datepicker();
.ui-datepicker.ui-datepicker-inline {
  width: 100% !important;
}

.mydpcontainer {
  width: 35vw;
  margin-left: auto;
  margin-right: auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="mydpcontainer">
  <div id="mydatepicker"></div>
</div>

person CamiloVA    schedule 24.09.2019