Date picker jquery et zend form

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour cyrus,

Je vois que tu es perdu, alors remettons les choses à leur place.

Tu veux insérer dans ton application le calendrier "datepicker" de Jquery. (doc officiel à lire SVP)

Ce n'est plus ni moins que du javascript à rajouter dans ta page de code, ZendX_JQuery est simplement la pour te faciliter la vie. Donc avant d'utiliser ZendX_Jquery il faut bien comprendre comment tout cela fonctionne.

JQuery est un framework Javascript au même titre que Prototype.
JQuery UI 'user interface' est la partie ergonomique de ce framework au même titre que Script.aculos.us pour Prototype.
Datepicker est un widget de JQuery UI.
La particularité de JQuery UI est le choix possible du thème qui se traduit par des couleurs différentes en gros des CSS (feuilles de styles différentes).

Le plus simple est de rendre ici http://jqueryui.com/download et de faire ces courses.

Décompresse les fichiers dans un répertoire (ex: monsite/public/js/jquery/ ) dans ton application, mais tu la déjà fait.

Il faut maintenant appeler les 2 bibliothèques javascript et la feuilles de style, de la manière suivante. (contrôle bien si tout je charge correctement avec la console Firefox)
Code:

1 2 3 4 5 6 7 8 <html> <head> <script src="http://localhost/monsite/public/js/jquery/jquery.1.4.2.js" type="text/javascript"> </script> <script src="http://localhost/monsite/public/js/jquery/ui/jquery-ui-1.8.2.custom.min.js" type="text/javascript"> <link rel="stylesheet" media="screen" type="text/css" href="http://localhost/monsite/public/css/ui-themes/ui-lightness/jquery-ui-1.8.2.custom.css" /> </head>
Maintenant que nous avons les outils javascript sous la main pour notre application, utilisons les.

Créer un fichier custom.js que tu appelleras de la même manière que précédemment et dans ce fichier colle le code suivant
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // sur chargement du document DOM termniné (soit notre page HTML) $(document).ready(function() { $("#date").datepicker( { showButtonPanel: true , dateFormat: 'dd/mm/yy' , dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] , dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] , monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Août','Sep','Oct','Nov','Déc'] , monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] , prevText: 'Précédent' , nextText: 'Suivant' , closeText: 'OK' , currentText: "Aujour'dhui" }); }); //EOf:: DOM isReady
$("#date").datepicker( {option} ); Veux dire dans le langage JQUERY applique le composant 'datepicker' avec les options ici définit sur un élément ($) de la page HTML qui a un id='date' (#date)

Voir la doc officiel de JQuery ici

ZendX_JQuery permet de s'affranchir de tout cela mais il fait la même chose.

02/08/2010, 15h25
cyrux

Citation:

(contrôle bien si tout je charge correctement avec la console Firefox)

Comment fais tu sa ?? :| juste avec la barre de progression en bas a droite ou avec firebug ??

Je tente cela de suite et tien au courant rapidement :ccool:

Petit problème : :pastaper:

pour inclure mes boutons, champs texte ou autre j'utilise cette méthode.
Code:

1 2 3 4 5 6 7 $date_depart_dossier = newZend_Form_Element_Text('date_depart_dossier'); $date_depart_dossier->setLabel('Date depart :') ->setRequired(true) ->addFilter('StripTags') ->addFilter('StringTrim') ->addValidator('NotEmpty');
ceci est un exemple d'un simple champ texte, je n'ai pas mis l'intégralité pour ne pas surcharger.

je ne peut donc me servir de cette ligne ci :

Code:

<input type="text" name="date_gestion" id="date" />

Une idée de comment faire ??

02/08/2010, 16h15
freeseb74
Cyrux,

En utilisant le Zend_Form_Element le id de ton élément correspond au nom de ton objet en l'occurence pour toi, vérifie ta page HTML pour t'en convaincre
Code:

1 2 3 4 5 6 $date_depart_dossier = new Zend_Form_Element_Text('date_depart_dossier'); // va rendre par défaut <input type="text" id="date_depart_dossier" />
Mais tu peux déclarer un id à ton objet en tant que nouvel attribut
Code:

1 2 3 $date_depart_dossier = new Zend_Form_Element_Text('date_depart_dossier'); $date_depart_dossier->setAttrib('id', 'date');
Pour ma part les noms des objets Zend_Form_Element corresponde à mes champs de ma base de données, cela est beaucoup plus simple dans la compréhension et dans l'utilisation du $Form->populate();
02/08/2010, 16h29
cyrux
Avec ce code ci :
Code:

1 2 3 $date_depart_dossier = new Zend_Form_Element_Text('date_depart_dossier'); $date_depart_dossier->setAttrib('id', 'date');
Effectivement, cela fonctionne parfaitement !!!
:ccool::ccool:
Le datepicker s'affiche, de façon "gigantesque" certes mais il s'affiche.
Chapeau les mecs !!!!! :king: :lahola::lahola: :king:

Une question :

Citation:

Mais tu peux déclarer un id à ton objet en tant que nouvel attribut

et quand j'ai plusieurs datepicker dans le formulaire,

Code:

$date_depart_dossier->setAttrib('id', 'date');

peut être réutilisé pour chacun ?? :koi: cela ne va pas poser de soucis ?

:merci::merci::merci::merci::merci::merci::chin::chin:
02/08/2010, 17h49
cyrux

bon après pas mal de tentative, effectivement, cela pose problème ... :whistle2:

il y a bien une subtilitée pour pouvoir placer plusieurs datepicker dans un formulaire ?? sans que ceux ci aient le même nom ?? :koi:

Une autre question :
est il normal que celui ci apparaisse de grande taille comparé à ce que j'ai demandé lors de mon téléchargement ??

Citation:

Pour ma part les noms des objets Zend_Form_Element corresponde à mes champs de ma base de données, cela est beaucoup plus simple dans la compréhension et dans l'utilisation du $Form->populate();

Pareil pour moi :D

Cyrux,

Concernant l'utilisation de plusieurs datepicker sur un formulaire il faut dupliquer le code javascript de configuration, pour plusieurs raisons :
- datepicker ne s'applique que sur un ID et non sur une class au sens HTML
- un ID doit être unique sur une page HTML (norme W3C)

Avec au moins 2 input date
Code:

1 2 3 <input type="text" id="date_depart_dossier"></input> <input type="text" id="date_fin_dossier"></input>
le code javascript
Code:

1 2 3 4 5 6 7 8 // sur chargement du document DOM termniné (soit notre page HTML) $(document).ready(function() { $("#date_depart_dossier").datepicker({ option }); $("#date_fin_dossier").datepicker({ option }); }); //EOf:: DOM isReady
N'oublie pas de lire la doc officiel
PS : Oui tout à l'heure je voulais dire console FIREBUG évidement.

Citation:

- un ID doit être unique sur une page HTML (norme W3C)

C'est pour cela que j'ai posé la question ;) afin de ne pas faire de bêtises.

Citation:

N'oublie pas de lire la doc officiel

C'est en cours :wow: c'est fou tout ce qui peut être fait avec Jquery !!!!

Citation:

Oui tout à l'heure je voulais dire console FIREBUG évidement.

:ccool: ta façon de le dire était totalement valable, ce n'est que moi qui ne connais pas encore bien les outils et qui suis trop "hésitant".

Autre chose, j'ai regardé un peu le code de jquery-ui-1.8.2.custom.css pour mon date picker, voici son code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /* Datepicker ----------------------------------*/ .ui-datepicker { width: 17em; padding: .2em .2em 0; } .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left:2px; } .ui-datepicker .ui-datepicker-next { right:2px; } .ui-datepicker .ui-datepicker-prev-hover { left:1px; } .ui-datepicker .ui-datepicker-next-hover { right:1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
Il doit être similaire à beaucoup de monde, une question reste encore irrésolue, mon date picker s'affiche de façon "gigantesque", j'ai tenté de réduire sa taille en changeant cette ligne de code (et quelques autres ...) :

Code:

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

mais lorsque je modifie le 17em par exemple, tout est décalé, mal fait, bref le datepicker est encore plus moche et tout aussi gigantesque :toutcasse:

Est-ce normal ? :koi:

03/08/2010, 10h36
freeseb74

Cyrux,

Pour ton problème d'affichage du calendrier, le plus sage est de travailler par élimination.
1) ne modifie pas les feuilles de style CSS de JQUERY UI c'est trop complexe et pense au mise à jour futur.
2) Désactive (retire les liens) des feuilles de style CSS et inclus les une par une en commençant par celle de JQuery UI et observe les changements.

Il faut apprendre à utiliser Firebug ici, c'est très utile.

JQuery est formidable pour modifier les pages HTML en live, mais il faut bien comprendre le DOM Modèle Objet de Documents, pour bien s'en servir.

Ma Devise "Apprendre, c'est se faciliter la vie".
03/08/2010, 11h25
cyrux

Ben dis donc, pas facile facile !!! :cfou:

j'ai testé ta méthode, effectivement elle permet de mieux cibler le problème ...
(j'ai quand même du modifier les lignes de code css pour arriver à quelque chose de mieux, tout est rentré dans l'ordre, il ne me reste plus que les 2 bouton (ajouter et ok) à réduire et le tour est joué.

D'autre part, il y avait "interférence" entre mon css et celui de jquery, comme par exemple mes table étaient pris en compte pour les 2, normal vous me direz ...:roll:

je continue mes tests et vous tiens au courant rapidement :ccool:

200ème post => qui amène la mention RESOLU !!!! ;-D

200ème post sur ce forum qui est des plus joyeux et qui peut se fêter dignement car il apporte la mention :resolu: à ce problème !!!

:bravo::chin::lahola::lahola::chin::bravo:

J'ai réussi à comprendre comment cela fonctionnait, :lun: avec une ENORME aide de votre part, pas mal de galères et d'essai, certes, mais bon on a rien sans rien !!! Comme vous me l'avez bien dit ;)

Voila un datepiker tout beau tout neuf (en moins gigantesque pour ceux que sa intéresse) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 11em; height: auto; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; font-size: .7em;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center;}
.ui-datepicker .ui-datepicker-title select { font-size: 1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 50%; }
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%; }
.ui-datepicker table {width:100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; } 
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.3em 0 0 0; padding:0 0.2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em;  font-size: .7em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

Encore une fois :merci::merci::merci::merci::merci:

Voir 40 message(s) de cette discussion en une page