Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 24-05-2011 14:01:04

kai23
Nouveau membre
Date d'inscription: 20-01-2011
Messages: 8

JQuery Datepicker et DateRange

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:

[lang=php]<?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:

[lang=javascript]<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:

[lang=javascript]
<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.

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages