Symfony 1.4: sfWidgetFormJQueryDate avec le plugin sfFormExtraPlugin

Bien le bonjour à tous!

Cela fait un moment qu’il n’y à plus de post sur le blog, mais le temps manque.

Alors aujourd’hui, je vais vous expliquer comment avoir un magnifique “Date picker” à la JQuery UI Dans votre projet symfony!

Introduction

Tous d’abord, nous allons utiliser le fameux plugin sfFormExtraPlugin disponible sur le catalogue des plugins. Ce plugin est développé entre autres par Fabien Potencier, l’initiateur du projet Symfony.

Ce plugin est très utile pour rajouter certain champs spéciaux dans vos formulaires et ce, de façon vraiment simple, comme des captchas, un calendrier pour choisir une date et bien d’autres. Une liste exhaustive et de la doc se trouve sur la page d’information du plugin sfFormExtraPlugin.

Installation du plugin

Comme tout autre plugin symfony, en lançant la commande :

$ cd symfony_project/
$ php symfony plugin:install sfFormExtraPlugin

Les librairies JQuery

Téléchargement

• JQuery (La dernière version si possible)
• JQuery UI (Vous pouvez choisir votre thème via le site de jqueryui)

Installation

Fichiers JavaScript

• Pour les fichiers js, les mettre dans votre répertoire /web/js/
• Pour les activer, il faut éditer le fichier /apps/VOTRE_APP/config/view.yml
  • javascripts: [jquery-1.4.2.min.js, jquery-ui-1.8.2.custom.min.js]

Fichiers CSS

• Pour les fichiers css, les mettre dans votre répertoire /web/css/votre_theme/
• Pour les activer il faut éditer de nouveau le fichier /apps/VOTRE_APP/config/view.yml
  • stylesheets: [main, votre_theme/jquery-ui-1.8.2.custom.css]

Ma classe MyForm

class myForm extends sfForm {
  public function configure()
  {
    $this->setWidgets(array(
      'birthday_date'    => new sfWidgetFormJQueryDate(array(
            'Les options'
      ),
      //...
    ));
    $this->widgetSchema->setLabels(array(
      'birthday_date'    => 'What's your day?',
      //...
    ));
  }
}
/**
   * Available options:
   *
   *  * image:       The image path to represent the widget (false by default)
   *  * config:      A JavaScript array that configures the JQuery date widget
   *  * culture:     The user culture
   *  * date_widget: The date widget instance to use as a "base" class
   */

Et enfin! L’affichage

Action

  public function executeRecherche(sfWebRequest $request){
    $this->form = new myForm();
    return sfView::SUCCESS;
  }

Vue

echo $form['birthday_date']->renderLabel().":".$form['birthday_date'];

Un ptit screen!

Bon dév’ :D