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

• Plugin sfFormExtraPlugin installé : sfFormExtraPlugin

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
  

Sources

• Symfony Internationalisation and Localisation
• Symfony Widgets
• jQuery UI
• Remy Solnais jquery et datepicker en Français
• W3schools parseInt en Javascript
• PHP.net fonction sprintf
• ImageShack