Comment redimensionner le contrôle jQuery DatePicker
J'utilise le contrôle jQuery DatePicker pour la première fois. Je le fais travailler sur mon formulaire, mais il est environ deux fois plus grand que je voudrais et environ 1,5 fois plus grand que la démonstration sur la page de l'interface utilisateur de jQuery. Y at-il un paramètre simple qui me manque pour contrôler la taille?
Edit: J'ai trouvé un indice, mais cela pose de nouveaux problèmes. Dans le fichier CSS, il est indiqué que le composant sera mis à l'échelle en fonction de la taille de la police de l'élément parent. Ils recommandent le réglage
body {font-size: 62.5%;}
faire 1em = 10px. Faire cela me donne un datepicker bien dimensionné, mais évidemment, il gâche le reste de mon site (j'ai actuellement la taille de police: .9em).
J'ai essayé de lancer un DIV autour de ma zone de texte et de définir sa taille de police, mais cela semble l'ignorer. Il doit donc y avoir un moyen de réduire le datepicker en changeant la police de caractères de son parent, mais comment puis-je le faire sans gâcher le reste de mon site?
Vous n’avez pas à le changer dans le fichier css jquery-ui (cela peut être déroutant si vous changez les fichiers par défaut), cela suffit si
div.ui-datepicker{
font-size:10px;
}
dans une feuille de style chargée après les fichiers ui
div.ui-datepicker est nécessaire dans le cas où ui-widget est mentionné après ui-datepicker dans la déclaration
Je ne peux pas ajouter de commentaire, c'est donc en référence à la réponse acceptée par Keijro En fait, j'ai ajouté les éléments suivants à ma feuille de style:
div.ui-datepicker {
font-size: 62.5%;
}
et cela a fonctionné aussi bien. Cela pourrait être préférable à la valeur absolue de 10px.
Pas sûr si quelqu'un a suggéré de suivre la voie suivante, si oui, ignorez simplement mes commentaires J'ai testé cela aujourd'hui et cela fonctionne pour moi. En redimensionnant simplement la police avant que le contrôle ne soit affiché:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
Utilisation de la fonction de rappel beforeShow
Je change la ligne suivante dans 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; }
Pour moi, c'était la solution la plus simple: J'ai ajouté le font-size:62.5%; à la première balise .ui-datepicker du fichier css personnalisé jQuery:
avant:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}
après:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }
Ajouter
div.ui-datepicker, .ui-datepicker td{
font-size:10px;
}
dans une feuille de style chargée après les fichiers ui . Cela redimensionnera également les éléments de date.
J'essayais ces exemples sans succès. Apparemment, d'autres feuilles de style sur la page définissaient des tailles de police par défaut pour différentes balises. Si vous ajustez ui-datepicker, vous modifiez un div. Si vous modifiez une div, vous devez vous assurer que le contenu de cette div hérite de cette taille. C'est ce qui a finalement fonctionné pour moi:
<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>
Bonne chance!
$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');
J'utilisais une entrée pour collecter et afficher le calendrier, et pour pouvoir le redimensionner, j'utilisais ce code:
div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}
Il fonctionne comme un charme.
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>
vous pouvez modifier jquery-ui-1.10.4.custom.css comme suit
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Ce code fonctionnera sur les boutons du calendrier .. La taille des chiffres augmentera avec "hauteur de ligne".
/* Change Size */
<style>
.ui-datepicker{
font-size:16px;
line-height: 1.3;
}
</style>
J'ai essayé d'utiliser la fonction callback beforeShow, mais j'ai également dû définir la hauteur de ligne. Ma version ressemblait à:
beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
La solution Jacob Tsui me convient parfaitement:
$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
$('div.ui-datepicker').css({ fontSize: '12px' }); fonctionne si nous l'appelons après $("#DueDate").datepicker();
Une autre approche:
$('.your-container').datepicker({
beforeShow: function(input, datepickerInstance) {
datepickerInstance.dpDiv.css('font-size', '11px');
}
});
Cela a fonctionné pour moi et semble simple ...
$(function() {
$('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});
<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
le meilleur endroit pour changer la taille du calendrier est dans le fichier jquery-ui.css
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .7em; /* <--default is 1.1em */
}
Nous pouvons modifier dans le fichier par défaut 'jquery-ui.css' comme ci-dessous le code donné:
div.ui-datepicker {
font-size: 80%;
}
Toutefois, il n'est pas recommandé de modifier le fichier par défaut 'jquery-ui.css', car il a peut-être été utilisé ailleurs dans le projet. La modification des valeurs dans le fichier par défaut peut modifier la police datepicker dans les autres pages Web où elle a été utilisée.
J'ai utilisé le code ci-dessous pour modifier "font-size". Je l'ai placé juste après que datepicker () est appelé comme indiqué ci-dessous.
<script>
$(function () {
$( "#datepicker" ).datepicker();
$("div.ui-datepicker").css("font-size", "80%")
});
</script>
J'espère que cela t'aides...
Pour que cela fonctionne dans Safari 5.1 avec Rails 3.1, j'ai dû ajouter:
.ui-datepicker, .ui-datepicker a{
font-size:10px;
}
Je pense que je l'ai trouvé - je devais aller dans le fichier CSS et changer directement la taille de la police pour le contrôle datepicker. Évident une fois que vous en avez connaissance, mais déroutant au début.
J'avais datepicker apparaissant dans un modal et à cause du "conteneur d'affichage de la date" sur le côté gauche, le calendrier était partiellement invisible, alors j'ai ajouté:
.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;
}
ouvrir ui.all.css
à la fin mis
@import "ui.base.css";
@import "ui.theme.css";
div.ui-datepicker {
font-size: 62.5%;
}
et aller !