Comment redimensionner le contrôle jQuery DatePicker

J'utilise le contrôle jQuery DatePicker pour la première fois. Je l'ai sur mon formulaire, mais il est environ deux fois plus gros que je le souhaiterais, et environ 1,5 fois plus gros que la démo sur la page de l'interface utilisateur jQuery. Existe-t-il un paramètre simple qui me manque pour contrôler la taille?

Edit: j'ai trouvé un indice, mais cela ouvre de nouveaux problèmes. Dans le fichier CSS, il indique que le composant sera mis à l'échelle en fonction de la taille de police de l'élément parent. Ils recommandent le réglage

body {font-size: 62.5%;}

pour faire 1em = 10px. Cela me donne un sélecteur de date de bonne taille, 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 il semble ignorer cela. Il doit donc y avoir un moyen de réduire le sélecteur de date en changeant la police de son parent, mais comment faire sans gâcher le reste de mon site?

Vous n'avez pas besoin de le changer dans le fichier CSS jquery-ui (cela peut être déroutant si vous changez les fichiers par défaut), cela suffit si vous ajoutez

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é ce qui suit à ma feuille de style:

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

et cela a aussi bien fonctionné. Cela pourrait être préférable à la valeur absolue de 10px.

Je ne sais pas si un organisme a suggéré 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 s'affiche:

$('#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; }

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.

Pour moi, c'était la solution la plus simple: j'ai ajouté font-size:62.5%;le premier.ui-datepicker balise 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%; }

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 le sélecteur ui-date, vous changez une div. Si vous modifiez un div, vous devez vous assurer que le contenu de ce 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!

J'utilisais une entrée pour collecter et afficher le calendrier, et pour pouvoir redimensionner le calendrier, j'utilisais ce code:

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

Il fonctionne comme un charme.

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

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>

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>

J'ai essayé l'approche d'utiliser la fonction de rappel avant Show, mais j'ai constaté que je devais également définir la hauteur de la ligne. Ma version ressemblait à:

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

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

Ce code fonctionnera sur les boutons de calendrier. la taille des nombres augmentera en utilisant "line-height".

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

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

Une autre approche:

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

$('div.ui-datepicker').css({ fontSize: '12px' }); travailler si nous l'appelons après $("#DueDate").datepicker();

Violon

La solution Jacob Tsui fonctionne parfaitement pour moi:

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

Nous pouvons modifier dans le fichier par défaut ' jquery-ui.css ' comme ci-dessous le code donné:

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

Cependant, changer la valeur par défaut ' jquery-ui.css n'est pas recommandé de le fichier » car il pourrait avoir été utilisé ailleurs dans le projet. La modification des valeurs dans le fichier par défaut peut modifier la police de datepicker dans d'autres pages Web où elle a été utilisée.

J'ai utilisé le code ci-dessous pour modifier la "taille de police". Je l'ai placé juste après l'appel de datepicker () comme indiqué ci-dessous.

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

J'espère que cela t'aides...

Je pense que je l'ai trouvé - j'ai dû aller dans le fichier CSS et changer directement la taille de la police pour le contrôle datepicker. Évident une fois que vous le savez, mais déroutant au début.

ouvrir ui.all.css

à la fin mettre

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

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

et aller !

Pour que cela fonctionne dans Safari 5.1 avec Rails 3.1, j'ai dû ajouter:

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

J'avais un datepicker apparaissant dans un modal et à cause du "date-display-container" sur le côté gauche, le calendrier était partiellement hors de vue, 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;
}