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

195

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

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

body {font-size: 62.5%;}

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

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

jquery-ui

— gfrizzle
источник

вставьте свой код, потому что я не знаю причин, почему он будет больше? и вы ссылаетесь на кнопку с изображением или на календарь, который показывает дни?

— TStamper

Я заметил, что HTML-код DatePicker будет вставлен вне любого содержащего div. Вот почему установка размера шрифта вашего div не сделала этого (кроме того, что объявление стиля должно быть более конкретным, как в ответе Джимми Стенке).

— evanrmurphy

390

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

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

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

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

— Джимми Стенке
источник

26

Шаг "в таблице стилей, загруженной после ui-файлов", очень важен. Если вы загрузите свою таблицу стилей до таблицы стилей jquery ui, любые заданные вами атрибуты будут перезаписаны.

— Трэвис

7

Чтобы остановить перезаписанную проблему согласно комментарию 1 - вы можете сделать это: font-size: 10px! Important;

— Мартин

7

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

— Дерек Адэйр

5

Вот почему они называются CASCADING Style Sheets (CSS)

— Mark W

1

LOL даже не заметил, что проблема может быть в размере шрифта! спасибо

— их

30

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

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

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

— Брайант Боуман
источник

20

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

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

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

— Джейкоб Кью
источник

2

Мне больше нравится это решение

— Code Monkey

9

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

— Павел Чучува
источник

5

Добавить

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

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

— Сатьярам Б.В.
источник

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%; }

— Роберт К.
источник

4

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

Удачи!

— Чад Куен
источник

2

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

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

Работает как часы.

— Крис
источник

2

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

— Стефан Хельткер
источник

1

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

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

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

— jimscafe
источник

1

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>

— babbu
источник

1

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

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

— PedroKTFC
источник

1

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

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

— Джон Белальказар
источник

1

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

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

— Иршад Хан
источник

1

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

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

— Anshu
источник

1

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

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

— mromagnoli
источник

1

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

скрипка

— Мостафа
источник

1

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

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

— Габриэль Молина
источник

1

Мы можем изменить файл 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>

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

— user3401675
источник

0

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

— gfrizzle
источник

0

открыть ui.all.css

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

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

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

и иди !

0

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

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

— глина
источник

0

У меня был указатель даты, появляющийся в модальном режиме, и из-за «даты-контейнера-контейнера» с левой стороны календарь был частично не виден, поэтому я добавил:

.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;
}

— макинтош
источник