Як змінити розмір управління jQuery DatePicker

195

Я вперше використовую управління jQuery DatePicker. У мене це працює над моєю формою, але це приблизно вдвічі більше, ніж хотілося б, і приблизно в 1,5 рази більше, ніж демонстрація на сторінці інтерфейсу jQuery UI. Чи є якась проста настройка, яку мені не вистачає для контролю розміру?

Редагувати: я знайшов підказку, але це відкриває нові проблеми. У файлі CSS він заявляє, що компонент буде масштабувати відповідно до розміру шрифту батьківського елемента. Вони рекомендують налаштувати

body {font-size: 62.5%;}

зробити 1em = 10px. Це дає мені вибірка датника за розміром, але, очевидно, це заплутує решту мого сайту (у мене зараз розмір шрифту: .9em).

Я спробував кинути DIV навколо свого текстового поля та встановити його розмір шрифту, але, здається, це ігнорую. Отже, повинен бути певний спосіб зменшити датчик, змінивши шрифт батьків, але як це зробити, не псуючи решту мого сайту?

jquery-ui

— грязь
джерело

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

— TStamper

Я помітив, що HTML-код, що вибирає дату, буде вставлений поза будь-яким вміщеним div. Ось чому встановити розмір шрифту вашого діва не вдалося (окрім того, що декларація стилю повинна бути більш конкретна, як у відповіді Джиммі Стенке).

— evanrmurphy

390

Не потрібно змінювати його у файлі css jquery-ui (це може бути заплутано, якщо ви змінюєте файли за замовчуванням), достатньо, якщо ви додасте

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

в таблиці стилів, завантаженій після ui-файлів

div.ui-datepicker потрібен у випадку, коли u-віджет буде вказаний після ui-datepicker у декларації

— Джиммі Стенке
джерело

26

Дуже важливим є крок "в таблиці стилів, завантажених після ui-файлів". Якщо ви завантажите таблицю стилів до таблиці стилів jquery ui, будь-які встановлені вами атрибути будуть перезаписані.

— Тревіс

7

Щоб зупинити перезаписану проблему відповідно до коментаря 1 - ви можете зробити це: font-size: 10px! Важливо;

— Мартін

7

Важливим є хакер-іш, я б точно рекомендував не використовувати це.

— Дерек Адаїр

5

Ось чому вони називаються таблицями стилів CASCADING (CSS)

— Mark W

1

lol навіть не помічав, що проблема може бути в розмірі шрифту! дякую

— themhz

30

Я не можу додати коментар, тому це посилається на прийняту відповідь Кійро. Насправді я замість цього додав до моєї таблиці стилів:

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

і це також працювало. Це може бути краще, ніж абсолютне значення 10 пікселів.

— Брайант Боуман
джерело

20

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

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

Використання функції зворотного дзвінка перед Шоу

— Яків CUI
джерело

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-файлів. Це також змінить розмір елементів дати.

— Satyaram BV
джерело

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-date, ви змінюєте 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>

— баббу
джерело

1

Я спробував підійти до використання функції зворотного виклику до ShowShow, але виявив, що я також повинен встановити висоту лінії. Моя версія виглядала так:

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

Цей код буде працювати на кнопках календаря. розмір чисел збільшиться, використовуючи "висоту рядка".

/* 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;
}

— Аншу
джерело

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

Рішення Якоба Цуї для мене прекрасно працює:

$('#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 та змінити розмір шрифту безпосередньо для керування даткою. Очевидно, коли ви дізнаєтесь про це, але спочатку заплутане.

— грязь
джерело

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

— Мак
джерело