Jak zmienić rozmiar formantu jQuery DatePicker

195

Korzystam z formantu jQuery DatePicker po raz pierwszy. Mam go w swoim formularzu, ale jest on około dwa razy większy niż chciałbym i około 1,5 razy większy niż wersja demo na stronie interfejsu użytkownika jQuery. Czy brakuje mi jakiegoś prostego ustawienia, aby kontrolować rozmiar?

Edycja: Znalazłem wskazówkę, ale to otwiera nowe problemy. W pliku CSS wskazuje, że komponent będzie skalowany zgodnie z rozmiarem czcionki elementu nadrzędnego. Zalecają ustawienie

body {font-size: 62.5%;}

zrobić 1em = 10px. Robiąc to, otrzymuję ładnie dobrany datepicker, ale oczywiście psuje resztę mojej strony (obecnie mam rozmiar czcionki: .9em).

Próbowałem rzucić DIV wokół mojego pola tekstowego i ustawić rozmiar czcionki, ale wydaje się, że to ignoruje. Musi więc być jakiś sposób, aby zmniejszyć datepicker poprzez zmianę czcionki jego rodzica, ale jak mam to zrobić, nie psując reszty mojej strony?

jquery-ui

— gfrizzle
źródło

wkleić kod, bo nie znam powodu, dla którego byłby większy? i czy masz na myśli przycisk obrazu lub rzeczywisty kalendarz pokazujący dni?

— TStamper,

Zauważyłem, że HTML datepicker zostanie wstawiony poza jakimkolwiek zawierającym div. Dlatego ustawienie rozmiaru czcionki div nie zrobiło tego (poza tym, że deklaracja stylu musiała być bardziej szczegółowa, jak w odpowiedzi Jimmy'ego Stenke).

— evanrmurphy

390

Nie musisz go zmieniać w pliku css jquery-ui (może to być mylące, jeśli zmienisz pliki domyślne), wystarczy dodać

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

w arkuszu stylów załadowanym po plikach interfejsu użytkownika

div.ui-datepicker jest potrzebny w przypadku, gdy widżet ui jest wymieniony po deklaracji ui-datepicker

— Jimmy Stenke
źródło

26

Bardzo ważny jest krok „w arkuszu stylów ładowanym po plikach interfejsu użytkownika”. Jeśli załadujesz arkusz stylów przed arkuszem stylów interfejsu użytkownika jquery, wszelkie ustawione atrybuty zostaną zastąpione.

— Travis,

7

Aby zatrzymać nadpisany problem zgodnie z komentarzem 1 - możesz to zrobić: font-size: 10px! Ważne;

— Martin

7

! ważne jest hack-ish, zdecydowanie odradzam korzystanie z tego.

— Derek Adair,

5

Dlatego nazywane są Arkuszami Stylów KASKADOWANIA (CSS)

— Mark W

1

lol nawet nie zauważył, że problemem może być rozmiar czcionki! dziękuję

— themhz

30

Nie mogę dodać komentarza, więc odnosi się to do zaakceptowanej odpowiedzi Keijro. Zamiast tego dodałem do arkusza stylów następujące elementy:

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

i to też zadziałało. Może to być lepsze niż wartość bezwzględna 10 pikseli.

— Bryant Bowman
źródło

20

Nie jestem pewien, czy jakieś ciało zaproponowało następujący sposób, jeśli tak, po prostu zignorujcie moje komentarze. Przetestowałem to dzisiaj i działa dla mnie. Po prostu zmieniając rozmiar czcionki przed wyświetleniem formantu:

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

Korzystanie z funkcji oddzwaniania przed wyświetleniem

— Jacob CUI
źródło

2

Bardziej podoba mi się to rozwiązanie

— Code Monkey

9

Zmieniam następujący wiersz w ui.theme.css:

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

do:

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

— Pavel Chuchuva
źródło

5

Dodaj

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

w arkuszu stylów załadowanym po plikach interfejsu użytkownika. Spowoduje to również zmianę rozmiaru elementów daty.

— Satyaram BV
źródło

5

Dla mnie było to najłatwiejsze rozwiązanie: dodałem font-size:62.5%;pierwszy .ui-datepickertag w niestandardowym pliku css jquery:

przed:

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

po:

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

— Robert K.
źródło

4

Próbowałem tych przykładów bez powodzenia. Najwyraźniej inne arkusze stylów na stronie ustawiały domyślne rozmiary czcionek dla różnych tagów. Jeśli zmienisz selektor ui-date, zmieniasz div. Jeśli zmienisz div, musisz upewnić się, że zawartość tego div dziedziczy ten rozmiar. Oto, co w końcu dla mnie zadziałało:

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

Powodzenia!

— Chad Kuehn
źródło

2

Używałem danych wejściowych do gromadzenia i wyświetlania kalendarza oraz do zmiany rozmiaru kalendarza. Korzystałem z tego kodu:

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

To działa jak urok.

— Chris
źródło

2

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

— Stefan Höltker
źródło

1

To działało dla mnie i wydaje się proste ...

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

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

— jimscafe
źródło

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
źródło

1

Próbowałem zastosować funkcję wywołania zwrotnego przed Show, ale stwierdziłem, że musiałem również ustawić wysokość linii. Moja wersja wyglądała następująco:

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

— PedroKTFC
źródło

1

najlepszym miejscem do zmiany rozmiaru kalendarza jest plik jquery-ui.css

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

— John Belalcazar
źródło

1

Ten kod będzie działał na przyciskach kalendarza. rozmiar liczb zwiększy się przy użyciu „wysokości linii”.

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

— Irshad Khan
źródło

1

możesz zmienić jquery-ui-1.10.4.custom.css w następujący sposób

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

— Anshu
źródło

1

Inne podejście:

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

— mromagnoli
źródło

1

$('div.ui-datepicker').css({ fontSize: '12px' }); działa, jeśli nazwiemy to później $("#DueDate").datepicker();

Skrzypce

— Mostafa
źródło

1

Rozwiązanie Jacob Tsui działa dla mnie idealnie:

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

— Gabriel Molina
źródło

1

Możemy zmienić domyślny plik „ jquery-ui.css ” w następujący sposób:

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

Jednak zmiana domyślnego pliku „ jquery-ui.css ” nie jest zalecana, ponieważ mógł zostać użyty gdzie indziej w projekcie. Zmiana wartości w pliku domyślnym może zmienić czcionkę datepicker na innych stronach internetowych, na których została użyta.

Użyłem poniższego kodu, aby zmienić „rozmiar czcionki”. Umieściłem go zaraz po wywołaniu datepicker (), jak pokazano poniżej.

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

Mam nadzieję że to pomoże...

— użytkownik3401675
źródło

0

Myślę, że go znalazłem - musiałem przejść do pliku CSS i bezpośrednio zmienić rozmiar czcionki dla kontrolki datepicker. Oczywiście, gdy się o tym dowiesz, ale na początku mylące.

— gfrizzle
źródło

0

otwórz ui.all.css

na końcu umieścić

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

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

i idź !

0

Aby to działało w Safari 5.1 z Rails 3.1, musiałem dodać:

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

— Glina
źródło

0

Miałem datepicker pojawiający się w trybie modalnym, a ponieważ „data-display-container” po lewej stronie, kalendarz był częściowo niewidoczny, więc dodałem:

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

— prochowiec
źródło