Как изменить размер элемента управления jQuery DatePicker

Question

Я впервые использую элемент управления jQuery DatePicker. У меня он работает с моей формой, но он примерно в два раза больше, чем хотелось бы, и примерно в 1,5 раза больше, чем демонстрация на странице пользовательского интерфейса jQuery. Есть ли какая-то простая настройка, которую мне не хватает для управления размером?

Редактировать: Я нашел подсказку, но это открывает новые проблемы. В файле CSS указано, что компонент будет масштабироваться в соответствии с размером шрифта родительского элемента. Они рекомендуют установить

body {font-size: 62.5%;}

, чтобы сделать 1em = 10px. Это дает мне удобный указатель даты, но, очевидно, он портит остальную часть моего сайта (в настоящее время у меня размер шрифта: .9em).

Я попытался создать DIV вокруг моего текстового поля и установить размер шрифта, но, похоже, это игнорируется. Таким образом, должен быть какой-то способ уменьшить средство выбора даты, изменив шрифт его родителя, но как мне сделать это, не испортив остальную часть моего сайта?

Answer 1

Вам не нужно изменять его в файле jquery-ui css (это может сбить с толку, если вы изменяете файлы по умолчанию), достаточно, если вы добавите

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

в таблице стилей, загруженной после ui-файлов

div.ui-datepicker необходим, если ui-widget упоминается после ui-datepicker в объявлении

Answer 2

Я не могу добавить комментарий, так что это ссылка на принятый ответ Кейро. Вместо этого я добавил в таблицу стилей следующее:

    div.ui-datepicker {
    font-size: 62.5%;
}

и это сработало. Это может быть предпочтительнее, чем абсолютное значение 10px.

Answer 3

Не уверен, что какой-то орган предложил следующий путь, если да, просто игнорируйте мои комментарии. Я проверял это сегодня, и это работает для меня. Просто изменив размер шрифта до отображения элемента управления:

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){    
           $(".ui-datepicker").css('font-size', 12) 
    }
});

Использование функции обратного вызова beforeShow

Answer 4

Я изменяю следующую строку в ui.theme.css:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

до:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }

Answer 5

Для меня это было самое простое решение: Я добавил font-size:62.5%; к первому тегу .ui-datepicker в пользовательском css-файле jquery:

перед:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;} 

после

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }

Answer 6

Добавить

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

в таблице стилей, загруженной после ui-файлов. Это также изменит размер элементов даты.

Answer 7

Я пробовал эти примеры безуспешно. Очевидно, другие таблицы стилей на странице устанавливали размеры шрифтов по умолчанию для разных тегов. Если вы настраиваете ui-datepicker, вы меняете div. Если вы измените div, вы должны убедиться, что содержимое этого div наследует этот размер. Вот что наконец-то сработало для меня:

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

Удачи!

Answer 8

Я использовал вход для сбора и показа календаря, и чтобы иметь возможность изменить размер календаря, я использовал этот код:

div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}

Работает как шарм.

Answer 9

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

Answer 10

Это сработало для меня и кажется простым ...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>