Symfony & jQuery DatePicker

Je vais vous montrer dans cet article comment mettre en place rapidement un datePicker jQuery dans un formulaire Symfony 1.2

Pré-requis

Fichiers externes

  • Télécharger jQuery UI
    (jquery-1.3.2.min.js, jquery-ui-1.7.1.custom.min.js)Vous pouvez télécharger une version “customizée” de jQuery UI ici :
    Télécharger JQuery UI
  • Version française
    (uidatepicker-fr.js)Vous trouverez le patch français de ce plugin ici :Datepicker jQuery en français
  • Intégration dans Symfony
    1. JS
      Copiez les fichiers :
      [jquery UI]/js/jquery-1.3.2.min.js
      [jquery UI]/js/jquery-ui-1.7.1.custom.min.js
      uidatepicker-fr.js
      directement dans [votre_projet]/web/js
    2. CSS
      • Copiez le fichier :
        [jquery UI]/css/jquery-ui-1.7.1.custom.css dans :
        [votre_projet]/web/css.
      • !! Attention !! :
        J’ai dû remplacer toutes les occurrences de :
        url(images/ par :
        url(../images/
    3. Images
      N’oubliez pas de copier le contenu de :
      [jquery UI]/css/smoothness/images dans :
      [votre_projet]/web/images

View.yml

N’oubliez pas de faire référence aux fichiers externes dans le view :

default:
  http_metas:
    content-type: text/html

  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow

  stylesheets:    [main.css, jquery-ui-1.7.1.custom.css]

  javascripts:    [jquery-1.3.2.min.js, uidatepicker-fr.js, jquery-ui-1.7.1.custom.min.js]

  has_layout:     on
  layout:         layout

sfWidgetFormJQueryI18nDate.class.php

J’ai modifié la classe sfWidgetFormJQueryDate pour qu’elle soit compatible avec un format de date français.
De plus, on peut facilement configurer les options du widget jQuery.

  • Code source :
    Fichier : sfWidgetFormJQueryI18nDate.class.php
    Chemin : /plugins/sfFormExtraPlugin/lib/widget/

    EOF
          ,
          $prefix, $id,
          $this->generateId($name.'[day]'), $this->generateId($name.'[month]'), $this->generateId($name.'[year]'),
          $prefix,
          $this->generateId($name.'[day]'), $this->generateId($name.'[month]'), $this->generateId($name.'[year]'),
          $id,
          min($this->getOption('years')), max($this->getOption('years')),
          $prefix, $prefix, $this->getOption('config'), $image, $this->getOption('culture')
        );
      }
    }
    
  • Explication des modifications :
    1. Ligne 20 :
      Notre widget dérive désormais de sfWidgetFormI18nDate

      class sfWidgetFormJQueryDate extends sfWidgetFormI18nDate
      
    2. Lignes 40, 41 et 42:
      On ajoute les options “config”, “culture” et “years” avec le paramètre “options” de la fonction “configure” :

        $this->addOption('config', $options["config"]);
        $this->addOption('culture', $options["culture"]);
        $this->addOption('years', $options["years"]);
      
    3. Lignes 85 et 86
      • Il faut inverser l’ordre du jour et du mois pour être compatible avec un format français, ce qui revient dans un sprintf, à changer l’ordre des lignes dans le code.
      • Il faut faire un parseInt sur le mois pour transformer “01” en “1”, parseInt est la fonction javascript permettant de caster une chaîne de caractères en Integer :
        Premier paramètre : la chaîne à caster (ici : date.substring(3, 5) )
        Deuxième paramètre : Le système numérique à utiliser (ici décimal : 10)
    \$("#%s").val(date.substring(0, 2));
    \$("#%s").val(parseInt(date.substring(3, 5), 10));
  • Lignes 95 et 109
    • On passe les options directement dans le premier argument.
      Le %s de la ligne 95 correspond au $this->getOption(‘config’) de la ligne 109
      Le %s de la ligne 98 correspond au $this->getOption(‘culture’) de la ligne 109
    • Ligne 109 : passage des options et da la culture au widget.
    $prefix, $prefix, $this->getOption('config'), $image, $this->getOption('culture')
    

Exemple d’utilisation

  • Schéma
    person:
      columns:
        [...]
        birthday:
          type: timestamp
        [...]
    
  • Formulaire (Instanciation du widget)
      [...]
      public function configure()
      {
        for($i = 1900; $i<2010; $i++) { $years[$i] = $i; } $this->widgetSchema['birthday'] = new sfWidgetFormJQueryI18nDate(
          array('config' => 'yearRange: \'1900:2009\', 
                               changeYear: true, 
                               changeMonth: true,',
                'culture' => 'fr',
                'years'=> array_combine($years, $years))
          );   
      }
      [...]
    
  • Aperçu
    jquery datepicker fr

Sources

Voir l’étude de cas
Lire l’article
Voir le témoignage
Fermer