So ändern Sie die Größe des jQuery DatePicker-Steuerelements

Ich verwende zum ersten Mal das jQuery DatePicker-Steuerelement. Ich habe es in meinem Formular zum Laufen gebracht, aber es ist ungefähr doppelt so groß wie ich möchte und ungefähr 1,5 mal so groß wie die Demo auf der jQuery-UI-Seite. Gibt es eine einfache Einstellung, die mir fehlt, um die Größe zu steuern?

Bearbeiten: Ich habe einen Hinweis gefunden, aber es eröffnet neue Probleme. In der CSS-Datei wird angegeben, dass die Komponente entsprechend der Schriftgröße des übergeordneten Elements skaliert wird. Sie empfehlen die Einstellung

body {font-size: 62.5%;}

1em = 10px machen. Dadurch erhalte ich einen Datepicker in guter Größe, der jedoch den Rest meiner Website durcheinander bringt (ich habe derzeit die Schriftgröße: .9em).

Ich habe versucht, einen DIV um mein Textfeld zu werfen und seine Schriftgröße festzulegen, aber das scheint das zu ignorieren. Es muss also eine Möglichkeit geben, den Datepicker durch Ändern der Schriftart des übergeordneten Elements zu verkleinern. Wie kann ich das tun, ohne den Rest meiner Website durcheinander zu bringen?

Sie müssen es nicht in der jquery-ui css-Datei ändern (es kann verwirrend sein, wenn Sie die Standarddateien ändern), es reicht aus, wenn Sie hinzufügen

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

in einem Stylesheet, das nach den UI-Dateien geladen wurde

div.ui-datepicker wird benötigt, wenn ui-widget in der Deklaration nach ui-datepicker erwähnt wird

Ich kann keinen Kommentar hinzufügen, daher bezieht sich dies auf die akzeptierte Antwort von Keijro. Stattdessen habe ich meinem Stylesheet Folgendes hinzugefügt:

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

und es hat auch funktioniert. Dies ist möglicherweise dem absoluten Wert von 10px vorzuziehen.

Ich bin mir nicht sicher, ob ein Körper den folgenden Weg vorgeschlagen hat. Wenn ja, ignoriere einfach meine Kommentare. Ich habe das heute getestet und es funktioniert für mich. Ändern Sie einfach die Größe der Schriftart, bevor das Steuerelement angezeigt wird:

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

Verwenden der Rückruffunktion beforeShow

Ich ändere die folgende Zeile in ui.theme.css:

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

zu:

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

Hinzufügen

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

in einem Stylesheet, das nach den UI-Dateien geladen wurde. Dadurch wird auch die Größe der Datumselemente geändert.

Für mich war dies die einfachste Lösung: Ich font-size:62.5%;habe die erste hinzugefügt.ui-datepicker Tag in der benutzerdefinierten CSS-CSS-Datei :

Vor:

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

nach dem:

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

Ich habe diese Beispiele ohne Erfolg ausprobiert. Anscheinend haben andere Stylesheets auf der Seite Standardschriftgrößen für verschiedene Tags festgelegt. Wenn Sie den UI-Datepicker einstellen, ändern Sie einen Div. Wenn Sie ein Div ändern, müssen Sie sicherstellen, dass der Inhalt dieses Div diese Größe erbt. Das hat endlich bei mir funktioniert:

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

Viel Glück!

Ich habe eine Eingabe verwendet, um den Kalender zu sammeln und anzuzeigen und um die Größe des Kalenders ändern zu können. Ich habe diesen Code verwendet:

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

Es wirkt wie ein Zauber.

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

Das hat bei mir funktioniert und scheint einfach ...

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

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

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>

Ich habe versucht, die Rückruffunktion vor Show zu verwenden, aber festgestellt, dass ich auch die Zeilenhöhe einstellen musste. Meine Version sah aus wie:

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

Der beste Ort, um die Größe des Kalenders zu ändern, ist die Datei jquery-ui.css

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

Dieser Code funktioniert auf Kalenderschaltflächen. Die Größe der Zahlen wird durch Verwendung der "Zeilenhöhe" erhöht.

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

Sie können jquery-ui-1.10.4.custom.css wie folgt ändern

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

Ein anderer Ansatz:

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

$('div.ui-datepicker').css({ fontSize: '12px' }); arbeiten, wenn wir es danach nennen $("#DueDate").datepicker();

Geige

Die Jacob Tsui-Lösung funktioniert perfekt für mich:

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

Wir können die Standarddatei ' jquery-ui.css ' wie folgt ändern :

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

Ändern Sie jedoch die Standardeinstellung ' jquery-ui.css' ' wird jedoch nicht empfohlen, da sie möglicherweise an einer anderen Stelle im Projekt verwendet wurde. Durch Ändern der Werte in der Standarddatei kann die Datepicker-Schriftart auf anderen Webseiten geändert werden, auf denen sie verwendet wurde.

Ich habe den folgenden Code verwendet, um die "Schriftgröße" zu ändern. Ich habe es direkt nach dem Aufruf von datepicker () platziert, wie unten gezeigt.

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

Hoffe das hilft...

Ich glaube, ich habe es gefunden - ich musste in die CSS-Datei gehen und die Schriftgröße für das Datepicker-Steuerelement direkt ändern. Offensichtlich, sobald Sie davon wissen, aber zunächst verwirrend.

öffne ui.all.css

am Ende setzen

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

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

und gehen !

Damit dies in Safari 5.1 mit Rails 3.1 funktioniert, musste ich Folgendes hinzufügen:

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

Ich hatte Datumsauswahl in einem Modal und wegen des "Datumsanzeige-Containers" auf der linken Seite war der Kalender teilweise nicht sichtbar, also fügte ich hinzu:

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