JQuery DatePicker denetimini yeniden boyutlandırma

195

JQuery DatePicker denetimini ilk kez kullanıyorum. Formum üzerinde çalıştım, ancak istediğimden iki kat daha büyük ve jQuery UI sayfasındaki demodan yaklaşık 1.5 kat daha büyük. Boyutu kontrol etmek için kaçırdığım basit bir ayar var mı?

Edit: Bir ipucu buldum, ama yeni sorunlar açar. CSS dosyasında, bileşenin üst öğenin yazı tipi boyutuna göre ölçekleneceğini belirtir. Ayarlamayı tavsiye ediyorlar

body {font-size: 62.5%;}

1em = 10 piksel yapmak için. Bunu yapmak bana güzel boyutlu bir tarih seçici verir, ama açıkçası sitemin geri kalanını berbat (şu anda yazı tipi boyutum var: .9em).

Metin kutumun etrafına bir DIV atmayı ve yazı tipi boyutunu ayarlamayı denedim, ancak bunu görmezden geliyor gibi görünüyor. Bu nedenle, üst öğesinin yazı tipini değiştirerek tarih seçiciyi küçültmenin bir yolu olmalı, ancak sitemin geri kalanını bozmadan nasıl yapabilirim?

jquery-ui

— gfrizzle
kaynak

Kodunuzu yapıştırın, çünkü neden daha büyük olacağını bilmiyorum? ve görüntü düğmesini veya günleri gösteren gerçek takvimi mi ifade ediyorsunuz?

— TStamper

Datepicker HTML herhangi bir div dışında eklenir fark ettim. Bu nedenle div'inizin yazı tipi boyutunu ayarlamak işe yaramadı (stil bildiriminin Jimmy Stenke'nin cevabı gibi daha spesifik olması gerektiği gerçeğinin yanı sıra).

— evanrmurphy

390

Jquery-ui css dosyasında değiştirmek zorunda değilsiniz (varsayılan dosyaları değiştirirseniz kafa karıştırıcı olabilir),

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

ui dosyalarından sonra yüklenen bir stil sayfasında

bildirimdeki ui-datepicker öğesinden sonra ui-widget'tan bahsedilmesi durumunda div.ui-datepicker gereklidir

— Jimmy Stenke
kaynak

26

"Ui dosyalarından sonra yüklenen bir stil sayfasında" adımı çok önemlidir. Stil sayfanızı jquery ui stil sayfasından önce yüklerseniz, ayarladığınız tüm özelliklerin üzerine yazılır.

— Travis

7

Üzerine yazılan sorunu yorum 1'e göre durdurmak için - bunu yapabilirsiniz: font-size: 10px! İmportant;

— Martin

7

! Önemli hack-ish, kesinlikle bunu kullanmamanızı tavsiye ederim.

— Derek Adair

5

Bu yüzden onlara CASCADING Stil Sayfaları (CSS) denir

— Mark W

1

lol bile sorunun yazı tipi boyutu olabilir fark etmedi! teşekkür ederim

— themhz

30

Bir yorum ekleyemiyorum, bu Keijro'nun kabul ettiği cevaba atıfta bulunuyor. Aslında bunun yerine stil sayfama aşağıdakileri ekledim:

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

ve işe yaradı. Bu, 10 piksellik mutlak değer olarak tercih edilebilir.

— Bryant Bowman
kaynak

20

Bazı vücutların aşağıdaki yolu önerip önermediğinden emin değilim, eğer evet ise, sadece yorumlarımı görmezden gelin. Bunu bugün test ettim ve benim için çalışıyor. Denetim görüntülenmeden önce yazı tipini yeniden boyutlandırarak:

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

Göstermeden önce geri arama işlevini kullanma

— Jacob CUI
kaynak

2

Bu çözümü daha iyi seviyorum

— Code Monkey

9

Ui.theme.css dosyasında aşağıdaki satırı değiştiriyorum:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

için:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }

— Pavel Chuchuva
kaynak

5

Ekle

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

ui dosyalarından sonra yüklenen bir stil sayfasında. Bu, tarih öğelerini de yeniden boyutlandıracaktır.

— Satyaram BV
kaynak

5

Benim için bu en kolay çözümdü: jquery özel css dosyasındaki font-size:62.5%;ilk .ui-datepickeretikete ekledim :

önce:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}

sonra:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }

— Robert K.
kaynak

4

Bu örnekleri başarılı olmadan deniyordum. Görünüşe göre sayfadaki diğer stil sayfaları farklı etiketler için varsayılan yazı tipi boyutlarını ayarlıyordu. Ui-datepicker öğesini ayarlarsanız, div değerini değiştirirsiniz. Bir div değerini değiştirirseniz, bu div'in içeriğinin bu boyutu miras aldığından emin olmanız gerekir. Sonunda benim için işe yarayan buydu:

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

İyi şanslar!

— Chad Kuehn
kaynak

2

Takvimi toplamak ve göstermek ve bu kodu kullandığım takvimi yeniden boyutlandırmak için bir girdi kullanıyordum:

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

Mucizevi şekilde çalışır.

— Chris
kaynak

2

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

— Stefan Höltker
kaynak

1

Bu benim için çalıştı ve basit görünüyor ...

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

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

— jimscafe
kaynak

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
kaynak

1

Daha önce geri arama işlevini kullanma yaklaşımını denedim, ancak satır yüksekliğini de ayarlamam gerektiğini buldum. Sürümüm şöyle görünüyordu:

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

— PedroKTFC
kaynak

1

takvimin boyutunu değiştirmek için en iyi yer jquery-ui.css dosyasında

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

— John Belalcazar
kaynak

1

Bu kod Takvim düğmeleri üzerinde çalışacaktır. "satır yüksekliği" kullanılarak sayıların boyutu artacaktır.

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

— Irshad Khan
kaynak

1

jquery-ui-1.10.4.custom.css dosyasını aşağıdaki gibi değiştirebilirsiniz

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

— Anshu
kaynak

1

Başka bir yaklaşım:

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

— mromagnoli
kaynak

1

$('div.ui-datepicker').css({ fontSize: '12px' }); sonra ararsak çalış $("#DueDate").datepicker();

Vaktini boşa harcamak

— Mostafa
kaynak

1

Jacob Tsui çözümü benim için mükemmel çalışıyor:

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

— Gabriel Molina
kaynak

1

Varsayılan ' jquery-ui.css ' dosyasında aşağıdaki kodda değişiklik yapabiliriz:

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

Ancak, varsayılan ' jquery-ui.css değiştirme ' dosyasının projede başka bir yerde kullanılmış olabileceği için önerilmez. Varsayılan dosyadaki değerlerin değiştirilmesi, kullanıldığı diğer web sayfalarındaki tarih seçici yazı tipini değiştirebilir.

"Yazı tipi boyutunu" değiştirmek için aşağıdaki kodu kullandım. Aşağıda gösterildiği gibi datepicker () çağrıldıktan hemen sonra yerleştirdim.

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

Bu yardımcı olur umarım...

— user3401675
kaynak

0

Ben buldum sanırım - CSS dosyasına gitmek ve doğrudan datepicker kontrolü için yazı tipi boyutunu değiştirmek zorunda kaldı. Açıkçası bunu bildiğinizde, ama ilk başta kafa karıştırıcı.

— gfrizzle
kaynak

0

ui.all.css dosyasını açın

sonunda koy

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

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

ve git !

0

Bunun Rails 3.1 ile Safari 5.1'de çalışması için şunu eklemek zorunda kaldım:

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

— kil
kaynak

0

Bir modda görünen datepicker vardı ve sol taraftaki "date-display-container" nedeniyle, takvim kısmen görünüm dışındaydı, bu yüzden ekledim:

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

— Mac
kaynak