Discussion :

[cyrux]

Bonjour à tous,

Nouvelle question :
J'ai plusieurs date à insérer dans un formulaire et suite à un peu de recherches, je suis tombé sur cette page
http://www.beberlei.de/jquery/demo/index.php

Je trouve le DatePicker très très bien fait et très pratique,
Quelqu'un sait comment je peut le mettre en place dans mes formulaires ?

Il y a bien un peu de code en dessous mais je ne le comprends pas bien.
Faut il que j'ajoute des librairies particulières ??

Pour info : J'utilise le pattern MVC

Merci d'avance !!

[freeseb74]

Bonjour,

Oui c'est possible, perso j'utilise le plugin Calendar de Jquery http://jqueryui.com/demos/datepicker/ en direct
ou via ZendX_JQuery
http://framework.zend.com/manual/fr/...uery.view.html

documentation Zend
jQuery UI Form Helpers
datePicker($id, $value, $params, $attribs): Create a DatePicker inside a text field. This widget is available since jQuery UI 1.5 and can therefore currently be used with the Google CDN. Using the 'handles' option to create multiple handles overwrites the default set value and the jQuery parameter 'startValue' internally inside the view helper.

Voilà pour la doc officielle.

Sinon dans le principe ce n'est que tu javascript qui vient en surcouche de ton application. il faut télécharger Jquery et JqueryUI avec un thème de ton choix (code CSS).

Une fois que ton application fait référence à ces librairies, colle le code suivant dans un fichier javascript (ex: custom.js) que tu appelleras également.

Il faut que ton input de ton formulaire est un id = "date"

une configuration du datepicker

Code :

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

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

Et voilà.

[MaitrePylos]

Si tu utilises ZendX_Jquery c'est encore plus facile

dans ta vue

Code :

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

    <?php echo $this->datePicker('date_entree', '30-07-2010', array('dateFormat' => 'dd-mm-yy', 'changeMonth' => true, 'changeYear' => true), array()) ?>

[cyrux]

Merci de vos réponses les Amis !!

Petite précision que j'ai omise de préciser la fois dernière => je suis totalement novice en la matière !!!! je pars de 0 !

donc je ne sais comment installer ce beau joujou

Suite à vos conseils :
J'ai réalisé mon jQuery UI que j'ai téléchargé.
Dans ce dossier, j'ai 3 sous dossier css / development-bundle / js
Concernant css et js je pense qu'il faut les placer dans public/css et public/js
mais pour le develoment-bundle, a il une nécessité ?? si oui, ou dois-je le placer ?

J'ai téléchargé Jquery Current Release 1.4.2 => Uncompressed et toujours pareil, aucune idée de ou le placer.
Pour être sur de ne pas faire d'erreur, il s'agit bien de lignes de commandes à copier coller ???

autre chose :

Une fois que ton application fait référence à ces librairies, colle le code suivant dans un fichier javascript (ex: custom.js) que tu appelleras également.

C'est à dire ?? ou placer cet appel ??

Il faut que ton input de ton formulaire est un id = "date"

j'ai pas tout saisi la ... ??

Pourrais on partir d'un exemple c'est à dire voir ce que je doit metre dans mon modèle, ma vue & mon controller ?? histoire d'y voir plus clair ??

encore !!

[cyrux]

Si tu utilises ZendX_Jquery c'est encore plus facile

C'est la même chose ??
Désolé, je débute, et je dois surement poser des questions idiotes ...

[MaitrePylos]

Va falloir que je fasse un tuto sur ZendX_Jquery

Alors dans ton boostrap tu ajoutes ceci :

Code :

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

1
2
3
4
5
6
7
8
9
 
    protected  function _initView() {
        // Initialize view
        $view = new Zend_View();
        $view->doctype('XHTML1_STRICT');
        $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=utf-8');
        $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');
               return $view;
    }

Le plus important est cette ligne

Code :

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

1
2
 
$view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');

Le reste du adapte à ton projet

Ensuite dans ton layout

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 <?php
        $this->jQuery()->enable();
        $this->jQuery()->setLocalPath($this->baseUrl() . '/public/js/jquery-1.4.2.min.js')
                ->setUiLocalPath($this->baseUrl() . '/public/js/jquery-ui-1.8.2.custom.min.js')
                ->addStyleSheet($this->baseUrl() . '/public/css/ui-lightness/jquery-ui-1.8.2.custom.css');
        $this->jQuery()->uiEnable();
 
        echo $this->jQuery();
        ?>

Tu peux éventuellement te passer de

Code :

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

1
2
3
4
 
  $this->jQuery()->setLocalPath($this->baseUrl() . '/public/js/jquery-1.4.2.min.js')
                ->setUiLocalPath($this->baseUrl() . '/public/js/jquery-ui-1.8.2.custom.min.js')
                ->addStyleSheet($this->baseUrl() . '/public/css/ui-lightness/jquery-ui-1.8.2.custom.css');

mais dans ce cas, il te faudra un accès web, car les fichiers se trouve sur googleapi.

Il ne faut pas oubier que tu dois avoir le répertoire et les classes ZendX dans le répertoire /library

[MaitrePylos]

Utilise alors la solution de freeseb74, et pour répondre à la question que tu te posais suite à sa proposition c'est ceci

Code :

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

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

[cyrux]

La solution de freeseb est elle similaire ? vais-je pouvoir utiliser "l'intégralité de jquery" (Date picker, "tableau roulant", bouton etc ...) ??

Je vais voir si je vais pas quand même passer à la version supérieure ...
mais le projet vas grandement prendre du retard ...
que me conseilles tu ??