Date picker jquery et zend form

**cyrux** · 30/07/2010, 11h29

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** · 30/07/2010, 13h18

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** · 30/07/2010, 14h58

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** · 02/08/2010, 09h53

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** · 02/08/2010, 10h05

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** · 02/08/2010, 10h14

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

**cyrux** · 02/08/2010, 10h32

un énorme merci de vous soucier de mon problème.

Je pensais la partie pas facile à gagner mais la...

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

Mon bootstrap : C:\wamp\www\XXXXXXX\index.php
=> Nous parlons bien du même ? je dis cela parce que dans mon bootstrap, je n'ai aucune fonction jusque maintenant.

Le reste du adapte à ton projet

que dois-je adapter ?? tout me semble correct ??

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

Ou puis-je les trouver ?

Ce que j'ai téléchargé (Jquery Current Release 1.4.2 et jQuery UI)
je ne m'en sers pas ??

Merci encore !!

**MaitrePylos** · 02/08/2010, 10h36

Envoyé par cyrux

Mon bootstrap : C:\wamp\www\XXXXXXX\index.php
=> Nous parlons bien du même ? je dis cela parce que dans mon bootstrap, je n'ai aucune fonction jusque maintenant.

C:\wamp\www\xxxxxx\application\Boostrap.php.

**cyrux** · 02/08/2010, 10h41

C:\wamp\www\xxxxxx\application\Boostrap.php.

Je n'ai aucun fichier de ce nom la ! à cet endroit je n'ai que le config.ini et c'est tout !

Un bootstrap, c'est bien ceci ??

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
20
<?php
error_reporting(E_ALL|E_STRICT);
ini_set('display_errors', 1);
date_default_timezone_set('Europe/Paris');
 
// mise en place des répertoires et chargement des classes
set_include_path('.'
. PATH_SEPARATOR . './library'
. PATH_SEPARATOR . './application/models/'
. PATH_SEPARATOR . get_include_path());
 
require_once 'Zend/Loader/Autoloader.php'; 
Zend_Loader_Autoloader::getInstance()->setFallbackAutoloader(true);
 
// Chargement de la configuration
$config = new Zend_Config_Ini('./application/config.ini', 'general');
$registry = Zend_Registry::getInstance();
$registry->set('config', $config);
 
...

Je peux fournir le détail de ma structure si besoin.
Merci !!!

**MaitrePylos** · 02/08/2010, 10h52

Tu suis quel tuto pour ton projet ?

**cyrux** · 02/08/2010, 10h55

J'ai utilisé celui ci :
http://g-rossolini.developpez.com/tu...ework/debuter/

Il est un peu "ancien" mais m'a permis de comprendre pas mal de choses.

**MaitrePylos** · 02/08/2010, 11h00

Et dans ce tutoriel, uil est clairement explicité de ne plus le suivre avec les verisons actuelle de ZF, mais de te reporter sur une mise à jour de ce tuto plus en accord avec les library que tu utilises

Je te laisse chercher et tu verras cela sera plus clair pour toi

**cyrux** · 02/08/2010, 11h09

Le fait est que mon projet est déjà à un stade bien avancé dirons nous et que je ne peux me permettre de recommencer tout de 0 (par manque de temps).

il existe beaucoup de modifications entre ancienne et nouvelle version ?

la méthode de freeseb74 a-t-elle aussi besoin de la "nouvelle version" ??

Quel tuto me conseilles tu ??

Je suis à la recherche de ce datepicker depuis début juillet et plus le temps passe, moins cela est clair !!

**cyrux** · 02/08/2010, 11h18

je lis ce tutoriel :
http://s-jdm.developpez.com/tutoriel...end-framework/

Les modifications risquent d'être "très violentes" ....

**MaitrePylos** · 02/08/2010, 11h22

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** · 02/08/2010, 11h26

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 ??

**MaitrePylos** · 02/08/2010, 11h35

La solution sera identique, tu peux utiliser jquery de plusieurs façon et celle-ci en est une

**cyrux** · 02/08/2010, 11h35

Si je passe à la nouvelle version, me sera il possible de récupérer ce qui à déja été créé ?? (mes modèles, formulaires, mon indexcontroller ... etc) sans avoir à toucher à trop de choses ??
dans ce cas, je tenterais bien de suivre le formulaire de la 1.8 & 1.9.

Il existe des grosses divergences entre les versions ?

Je pourrais accorder une après midi à faire la mise à jour, mais pas plus, je suis déja "short in time" !!!

Je ne peut m'en prendre qu'a moi même malheureusement

...

que me conseilles tu ?? toi qui t'y connais pas mal !! (personnellement j'ai découvert html/php/php5/mysql/zend framework/jQuery sur 4 semaines donc j'y connais pas grand chose ...

**cyrux** · 02/08/2010, 11h47

Pourrais tu me donner un peu plus d'explications concernant la méthode de Freeseb74 ??
comme par exemple ou placer les fichiers que j'ai téléchargé, que mettre dans mon modèle, ma vue, mon controlleur, histoire de me faire une idée et de prendre une décision ...

MERCI !!

**cyrux** · 02/08/2010, 14h21

Personne n'a d'informations sur la méthode de freeseb74 ?? Et sur les questions que j'ai préalablement posées ?
Je suis malheureusement totalement dans le flou et ne sais pas si je dois passer en 1.8/1.9 ou si je continue d'utiliser celle ci ....

Date picker jquery et zend form

Langage PHP

Discussions similaires

Partager

Partager