web-dev-qa-db-fra.com

Comment définir la taille et la position de jquery Icône de calendrier du sélecteur de date

j'utilise le sélecteur de date jquery l'icône de calendrier, l'image de déclenchement près de la zone de texte est par défaut en haut.

$(#textbox1).datepicker({
    showOn: "button",
    buttonImage: "calendar_1.png",
    buttonImageOnly: true
)};
jqueryjquery-uijquery-plugins
22
UMAIR ALI

En inspectant l'élément avec firebug , j'ai ceci:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

Vous pouvez ensuite travailler avec cette classe CSS ui-datepicker-trigger.

29
Gerep

Ajouter un CSS personnalisé à votre page

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>
27
diEcho

Vous pouvez éditer la classe .ui-datepicker-trigger avec jQuery mais il est important de faire l'édition après la fonction datepicker.

Exemple:

$(#textbox1).datepicker({
        showOn: "button",
        buttonImage: "calendar_1.png",
        buttonImageOnly: true )};

$(".ui-datepicker-trigger").css("margin-bottom","-6px");
11
Adnan Mulalic

Rien de tout cela n'a fonctionné pour moi. Il semble que jQuery définit la propriété height du bouton d’image lorsque vous quittez la fonction Ready. Donc, si vous essayez de définir la propriété height dans la fonction ready, elle sera écrasée à 26px. J'ai donc créé une fonction distincte à exécuter dans l'événement onload de la balise body. Il met à jour la propriété height du bouton à ce que je veux comme ceci:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" >
var oDateCell = oTableRow.cells[2];
var sDateCellHTML = oDateCell.innerHTML;
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;");
oDateCell.innerHTML = sRevisedHTML;

J'ai encore travaillé sur cela et j'ai découvert que le code ci-dessus avait un bogue. Cela provoque l'échec de l'événement click et le calendrier ne s'affiche pas lorsque vous cliquez sur l'image. Je ne sais pas pourquoi, mais j'ai trouvé une meilleure méthode qui fonctionne. La méthode ci-dessus était une manière maladroite (paresseuse?) De changer de style. La bonne façon est comme ça:

            var oTableRow = oTable.rows[iRow];
            if (oTableRow.cells.length > 2)
            {
                var oDateCell = oTableRow.cells[2];
                if (oDateCell.childNodes.length > 1)
                {
                    var oImage = oDateCell.childNodes[1];
                    oImage.style.height = "13px";
                }
            }
1
Dallas Steve

Appliquer ce CSS:

.ui-datepicker-trigger {
   position: absolute;
}
0
Ronak Patel

Si vous utilisez votre propre image personnalisée pour l'icône du calendrier, vous pouvez simplement créer l'image à la taille souhaitée. Dans mon cas, la hauteur de ma zone de saisie était 24px et la taille de l'icône, 16X16. Je viens d'éditer la taille de l'image et de la rendre 24X24 et le problème a été résolu.

0
Bodhisatwa Ghosh