[ZF 1.11] JQuery Datepicker et DateRange

[Kai231]

Bonjour,

Je vous explique mon problème. Je me casse la tête depuis un bon moment et je me trouve réellement face à une impasse.

J'ai intégré JQuery à notre projet, et nous avons réussi à implémenter le datePicker. Pour des raisons de simplicité, nous avons fait une classe "ButtonJQDate" qui permet de créer un élément datePicker sans avoir à le rappeler dans chacun de nos "forms".

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<?php
class App_Element_ButtonJQDate extends ZendX_JQuery_Form_Element_DatePicker
{
    public function __construct ($label)
    {
    	parent::__construct($label, array('label'=> $label));
 
    	$formJQueryElements = array(
		    array('UiWidgetElement', array('tag' => '')),
		    array('Errors'),
		    array('Description', array('tag' => 'div', 'class' => 'tooltip')),
		    array('Label', array('separator' => ' : ')),
		    array(array('question' => 'HtmlTag'), array('tag' => 'question', 'class'=>'qLabel')),
		);
    	$this->setDecorators($formJQueryElements);
        $dayNamesMin = array('Di', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'); //Pour les jours
    	$monthDaysMin = array('Janvier','Fevrier','Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre');     //Pour les mois
 
     	$this		->setJQueryParam('dateFormat', 'dd/mm/yy') // Met la date au format JJ/MM
         			->setJQueryParam('changeMonth', true) // Permet de changer de mois
         			->setJQueryParam('changeYear', true) //Enlève les changements d'années
         			->setJQueryParam('dayNamesMin', $dayNamesMin) //Change les noms des jours.
         			->setJQueryParam('firstDay', 1) // Permet de définir le premier jour qui apparait à gauche du calendrier.
         			->setJQueryParam('yearRange', 'c-100') //Permet de définir combien d'années on veut en plus ou en moins par rapport à la date actuelle
         			//->setJQueryParam("appendText", '(JJ/MM/AAAA)') //Permet de définir le texte apparaissant en dessous de la zone de texte.
         			->setJQueryParam('buttonImage', Zend_Controller_Front::getInstance()->getBaseUrl().'/img/calendar.png') // Permet de donner une petite image.
         			->setJQueryParam("buttonImageOnly", true) // Permet de définir une image seule pour faire apparaître le calendrier
         			->setJQueryParam("buttonText", ' Date ') //Permet d’utiliser soit la zone de texte, soit l'image pour faire apparaître le calendrier
    			    ->setJQueryParam("closeText", 'Fermer') //Change le nom du bouton de fermeture
    			    ->setJQueryParam("currentText", 'Aujourd\'hui') //Change le nom permettant d'aller à la date actuelle
    			    ->setJQueryParam("regional", 'fr') // Pour la région
    			    ->setJQueryParam("gotoCurrent", false)//Permet d'aller à la date actuelle.
    			    ->setJQueryParam("hideIfNoPrevNext", true )
    			    ->setJQueryParam("autoSize", true) //Taille automatique
    			    ->setJQueryParam('monthNamesShort', $monthDaysMin) //Les noms des mois
    			    ->setJQueryParam('minDate', '0')
 
    			    //->setJQueryParam('HtmlTag', 'td') //Les noms des mois
    			    /*
    			     * Les animations :
    			        blind - Celui par défaut, rien de particulier.
						drop - Arrivée vers la gauche ou la droite.
						explode - 'Explosion', méme si loin d'étre extraordinaire.
						fade - Fondu par opacité.
						fold - Se déploie comme du papier.
						puff - Degrossisement.
						slide - un peu comme le 'drop'.
						scale - Grossisement 	
 
						  Les spéciaux :
						bounce - arrivée en rebondissant, mon préféré ;).
						highlight - Clignotement du fond.
						pulsate - apparait et disparait.
						shake - Fait le shaker.
    			     */
 
    			    ->setJQueryParam("showAnim", 'show')
    			    ->setJQueryParam("showButtonPanel", false)
    			    ->setJQueryParam("showOn", 'both');
    }
}

Celui-ci fonctionne parfaitement. Il nous génère, dans le head de notre application, les lignes suivantes :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 
//<![CDATA[
 
$(document).ready(function() {
    $("#date_debut").datepicker({"dateFormat":"dd\/mm\/yy","changeMonth":true,"changeYear":true,"dayNamesMin":["Di","Lun","Mar","Mer","Jeu","Ven","Sam"],"firstDay":1,"yearRange":"c-100","buttonImage":"\/MPAMv1\/public\/img\/calendar.png","buttonImageOnly":true,"buttonText":" Date ","closeText":"Fermer","currentText":"Aujourd'hui","regional":"fr","gotoCurrent":false,"hideIfNoPrevNext":true,"autoSize":true,"monthNamesShort":["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"],"minDate":"0","showAnim":"show","showButtonPanel":false,"showOn":"both"});
    $("#date_fin").datepicker({"dateFormat":"dd\/mm\/yy","changeMonth":true,"changeYear":true,"dayNamesMin":["Di","Lun","Mar","Mer","Jeu","Ven","Sam"],"firstDay":1,"yearRange":"c-100","buttonImage":"\/MPAMv1\/public\/img\/calendar.png","buttonImageOnly":true,"buttonText":" Date ","closeText":"Fermer","currentText":"Aujourd'hui","regional":"fr","gotoCurrent":false,"hideIfNoPrevNext":true,"autoSize":true,"monthNamesShort":["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"],"minDate":"0","showAnim":"show","showButtonPanel":false,"showOn":"both"});
});
//]]>
 
 
 
</script>

Qui correspondent à nos deux champs "Date de départ" et "Date d'arrivée".

Seulement voilà, nous aimerions pouvoir faire en sorte que le date d'arrivée soit inférieure à la date de départ, sans avoir à changer tout notre formulaire.

J'ai tenté d'insérer, dans le head :

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
25
26
27
 
<script type="text/javascript">
 
	$(document).ready(function() {
	$("#date_debut , #date_fin").datepicker({	
		beforeShow: customRange, // appel de la fonction AVANT
		minDate: +1, maxDate: '+1Y +1M' // mindate = ajourd'hui ET maxDate = dans un an + 1 mois
		});
	});	
 
 
 
	function customRange(input) { 
 
	return {
 
		minDate: (input.id == 'date_fin' ? 
 
		$('#date_debut').datepicker('getDate') : +1), // +1 pour repasser minDate
 
		maxDate: (input.id == 'date_debut' ? 
 
		$('#date_fin').datepicker('getDate') : '+1Y +1M')}; //  '+1Y +1M' pour repasser maxDate
 
	} 
 
</script>

Mais rien n'y fait.

Si vous avez des réponses, des pistes ou n'importe quoi, je suis preneur.