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

Question

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

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

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

body {font-size: 62.5%;}

сделать 1эм = 10 ПКС. Это дает мне хороший размер datepicker, но, очевидно, он испортит остальную часть моего сайта (в настоящее время у меня есть размер шрифта: .9em).

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

188

jquery-ui

автор: gfrizzle

21 ответов

автор: Jimmy Stenke · Accepted Answer · 2009-03-18 21:54:31

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

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

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

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

автор: Bryant Bowman · Accepted Answer · 2011-08-08 12:01:46

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

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

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

автор: Jacob CUI · Accepted Answer · 2013-04-22 01:32:30

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

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

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

автор: Pavel Chuchuva · Accepted Answer · 2009-03-18 21:48:25

Я изменяю следующую строку в ui.тема.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; }

автор: Satyaram B V · Accepted Answer · 2010-12-20 20:35:25

добавить

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

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

автор: Robert K. · Accepted Answer · 2012-06-11 17:23:20

для меня это было самое простое решение: Я добавил 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%; }

автор: Chad Kuehn · Accepted Answer · 2012-07-19 20:42:49

Я пробовал эти примеры без успеха. По-видимому, другие таблицы стилей на странице устанавливали размеры шрифтов по умолчанию для разных тегов. Если вы настраиваете 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>

удачи!

автор: Chris · Accepted Answer · 2012-06-06 05:19:58

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

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

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

автор: Stefan Wendelmann · Accepted Answer · 2013-07-24 08:36:46

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

2

автор: Stefan Wendelmann

автор: jimscafe · Accepted Answer · 2012-05-15 14:05:51

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

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

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

автор: babbu · Accepted Answer · 2013-03-17 06:50:12

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>

автор: PedroKTFC · Accepted Answer · 2013-07-03 23:32:30

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

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}

автор: John Belalcazar · Accepted Answer · 2014-02-24 19:59:22

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

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}

автор: Irshad Khan · Accepted Answer · 2014-05-07 08:41:06

этот код будет работать на кнопках Каландра. размер чисел будет увеличиваться с помощью "line-height".

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>

автор: Anshu · Accepted Answer · 2014-08-12 11:14:23

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

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}

автор: mromagnoli · Accepted Answer · 2015-06-02 19:04:28

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

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});

автор: Mostafa · Accepted Answer · 2015-10-20 14:15:43

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

Скрипка

автор: Gabriel Molina · Accepted Answer · 2015-11-11 22:56:31

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

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

автор: gfrizzle · Accepted Answer · 2009-03-18 19:46:07

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

автор: · Accepted Answer · 2009-09-23 19:34:53

открыть ИП.все.в CSS

в конце ставить

@import "ui.base.css";
@import "ui.theme.css";

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

и вперед !

автор: Clay · Accepted Answer · 2011-08-25 16:43:30

чтобы заставить это работать в Safari 5.1 с Rails 3.1, мне пришлось добавить:

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