Discussion :

[jpguiche]

Bonjour,

J'utilise datepicker associé à un champ input et je voudrais changer la taille de la popup qui s'affiche (avec les jours du mois) quand on clique dans le champ. Comment fait-on ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$('#plage_1_1').datepicker();
<input type='text' id='plage_1_2'>

Merci (nouveau en JQuery...)

JP

[Spartacusply]

Simple : personnalise ton datepicker en utilisant le css.

[jpguiche]

Si je comprends bien ce que tu me dis, je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('#plage_1_1').css('width','150px');

ca a pour effet de mettre la taille de 150px au champ input alors que ce que je veux c'est changer la taille de la fenêtre qui s'affiche en popup avec les dates.

Peux-tu me préciser ?

Merci

[Spartacusply]

Pourquoi appliquer le style via jquery ? Utilise directement une feuille de style que tu inclus après celle du datepicker bien entendu, ce sera beaucoup plus simple.

Ce qu'il faut que tu fasses, c'est que tu inspectes les sources de ton site, et il faut que tu indiques des styles pour les classes du datepicker (qui commence toutes par .ui-datepicker...).

En gros, c'est un truc dans le genre (me rappel plus de la classe exacte) qu'il faut que tu écrives :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.ui-datepicker-calendar {
    width : 300px;
    height : 250px;
}

[jpguiche]

Je suis allé voir le css de jquery-ui et effectivement je tombe au beau milieu du css sur :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

je rajoute donc mon propre css avec :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<style type='text/css'>.ui-datepicker {width: 13em;}</style>

ce qui a bien pour effet de surcharger la valeur de width. Ca marche mais franchement je trouve bizarre qu'il faille aller foiner dans du code pour deviner l'attribut à changer et qu'on ne puisse pas faire ça avec une interface bien définie...

En tous cas le principal c'est que ça marche donc merci à toi Spartacusply

JP

[Spartacusply]

C'est bien comme ça qu'il faille faire.

Pour info, il est possible de débugguer du Html/CSS (et javascript en l'occurence) grâce aux consoles qui sont intégrés sur les différents navigateurs : pour y accéder il suffit d'appuyer sur la touche F12 de ton clavier. Il existe aussi l'excellente extension firebug sous firefox qui est sans doute le meilleur allié du développeur web.