Как изменить размер элемента управления jQuery DatePicker - PullRequest
Новая
       41

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

193 голосов
/ 18 марта 2009

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

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

body {font-size: 62.5%;}

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

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

Ответы [ 23 ]

1 голос
/ 17 марта 2013 
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>
1 голос
/ 20 февраля 2019

Мы можем изменить файл по умолчанию ' jquery-ui.css ', как показано ниже с кодом: 

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

Однако изменение файла по умолчанию ' jquery-ui.css ' не рекомендуется, так как он мог использоваться в другом месте в проекте. Изменение значений в файле по умолчанию может изменить шрифт datepicker на других веб-страницах, где он использовался.

Я использовал приведенный ниже код для изменения размера шрифта. Я поместил его сразу после вызова datepicker (), как показано ниже. 

<script>
        $(function () {
            $( "#datepicker" ).datepicker();
            $("div.ui-datepicker").css("font-size", "80%")
        });
</script>

Надеюсь, это поможет ...

1 голос
/ 20 октября 2015

$('div.ui-datepicker').css({ fontSize: '12px' }); работа, если мы позвоним после $("#DueDate").datepicker();

Fiddle

1 голос
/ 12 ноября 2015

Решение Jacob Tsui идеально подходит для меня: 

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){ 
        $(".ui-datepicker").css('font-size', 12)
    }
});
1 голос
/ 12 августа 2014

вы можете изменить jquery-ui-1.10.4.custom.css следующим образом 

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}
1 голос
/ 02 июня 2015

Другой подход: 

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});
1 голос
/ 07 мая 2014

Этот код будет работать на кнопках календаря. размер чисел увеличится при использовании «line-height». 

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>
1 голос
/ 24 февраля 2014

лучшее место для изменения размера календаря - файл jquery-ui.css 

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
1 голос
/ 04 июля 2013

Я попробовал подход с использованием функции обратного вызова перед Show, но обнаружил, что мне нужно было также установить высоту строки. Моя версия выглядела так: 

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
0 голосов
/ 18 марта 2009

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...