Я использую элемент управления jQuery DatePicker в первый раз. У меня есть работа над моей формой, но это примерно вдвое больше, чем хотелось бы, и примерно в 1,5 раза больше, чем демо на странице пользовательского интерфейса jQuery. Есть ли какая-то простая настройка, которую мне не хватает для управления размером?
Изменить: Я нашел ключ, но он открывает новые проблемы. В файле CSS указано, что компонент будет масштабироваться в соответствии с размером шрифта родительского элемента. Они рекомендуют устанавливать
body {font-size: 62.5%;}
сделать 1em = 10px. Это дает мне красивую дату, но, очевидно, это испортит остальную часть моего сайта (у меня сейчас есть размер шрифта:.9em).
Я попытался бросить DIV вокруг моего текстового поля и установить его размер шрифта, но, похоже, это игнорирует. Таким образом, должен быть какой-то способ уменьшить значение datepicker, изменив шрифт его родителя, но как мне это сделать, не испортив остальную часть моего сайта?
Вам не нужно изменять его в файле jquery-ui css (это может сбивать с толку, если вы меняете файлы по умолчанию), этого достаточно, если вы добавите
div.ui-datepicker{
font-size:10px;
}
в таблице стилей, загруженной после ui файлов
div.ui-datepicker необходим в случае, если ui-widget указан после ui-datepicker в объявлении
Я не могу добавить комментарий, так что это касается принятого ответа Кейджро. Вместо этого я добавил следующее в таблицу стилей:
div.ui-datepicker {
font-size: 62.5%;
}
и это сработало. Это может быть предпочтительнее абсолютного значения 10px.
Не уверен, предложил ли какой-либо орган следующий путь, если да, просто игнорируйте мои комментарии. Я тестировал это сегодня, и это работает для меня. Просто изменив размер шрифта до отображения элемента управления:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
Использование функции обратного вызова beforeShow
Я изменяю следующую строку в файле 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; }
Добавить
div.ui-datepicker, .ui-datepicker td{
font-size:10px;
}
в таблице стилей, загруженной после ui файлов. Это также изменит размер элементов даты.
Для меня это было самое простое решение:
Я добавил 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%; }
Я пробовал эти примеры без успеха. По-видимому, другие таблицы стилей на странице устанавливали размер шрифта по умолчанию для разных тегов. Если вы настроите 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>
Удачи!
Я использовал вход для сбора и отображения календаря, и чтобы иметь возможность изменять размер календаря, я использовал этот код:
div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}
Он работает как шарм.
$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');
Это сработало для меня и кажется простым...
$(function() {
$('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});
<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
with out changing the css file you can also change the calendar size by putting the the following code in to ur <head>.....</head> tag:
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>
<script>
$(function() {
$( "#datepicker" ).datepicker({
//font-size:10px;
//numberOfMonths: 3,
showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>
</head>
Я попытался использовать функцию обратного вызова beforeShow, но обнаружил, что мне также нужно установить высоту строки. Моя версия выглядела так:
beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
Лучшее место для изменения размера календаря находится в файле jquery-ui.css
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .7em; /* <--default is 1.1em */
}
Этот код будет работать с кнопками Calender. размер чисел будет увеличиваться с помощью "line-height".
/* Change Size */
<style>
.ui-datepicker{
font-size:16px;
line-height: 1.3;
}
</style>
вы можете изменить jquery-ui-1.10.4.custom.css следующим образом
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Другой подход:
$('.your-container').datepicker({
beforeShow: function(input, datepickerInstance) {
datepickerInstance.dpDiv.css('font-size', '11px');
}
});
$('div.ui-datepicker').css({ fontSize: '12px' }); работать, если мы его назовем
$("#DueDate").datepicker();
Решение Jacob Tsui отлично подходит для меня:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
Я думаю, что нашел это - мне пришлось зайти в файл CSS и напрямую изменить размер шрифта для элемента управления datepicker. Очевидно, как только вы об этом знаете, но сначала сбиваете с толку.
открыть ui.all.css
в конце положить
@import "ui.base.css";
@import "ui.theme.css";
div.ui-datepicker {
font-size: 62.5%;
}
и идите!
Чтобы заставить это работать в Safari 5.1 с Rails 3.1, мне пришлось добавить:
.ui-datepicker, .ui-datepicker a{
font-size:10px;
}
У меня был указатель даты, появляющийся в модальном режиме, и из-за "date-display-container" в левой части календаря частично не было видно, поэтому я добавил:
.datepicker-date-display {
display: none;
}
.datepicker-calendar-container {
max-height: 21em;
}
.datepicker-day-button {
line-height: 1.2em;
}
.datepicker-table > thead > tr > th {
padding: 0;
}