Jeudi le 1 avril 2010 à 17:45

symfony: Utiliser sfWidgetFormJQueryDate avec sfFormExtraPlugin

Par Mohammed CHERIFI

Vu le très peu de documentation que j’ai pu trouvé au sujet du plugin sfFormExtraPlugin de symfony, voici un guide rapide qui vous permettra d’installer le plugin sfFormExtraPlugin et pouvoir afficher un calendrier pour les champs de type date grâce au widget sfWidgetFormJQueryDate, voici donc les étapes à suivre:

1 – Installer le plugin sfFormExtraPlugin

En mode console, positionnez vous sur le dossier d’installation du projet et exécuter :

./symfony plugin:install sfFormExtraPlugin

2 – Télecharger et mettre en place les librairies jQuery nécessaire

Malheureusement le plugin sfFormExtraPlugin n’inclue pas les librairies externes nécessaire au fonctionnement, il faut le faire à la main!

il faut donc télécharger JQuery et JQuery UI:

Allez sur le site de jQuery UI
Dans la liste des composants déchochez toutes les cases sauf Core et Datepicker
Sélectionner le thème qui vous convient à droite et cliquez Télécharger

3 – Placé les fichiers téléchargés dans le dossier web et modifier le fichier view.yml

Décompresser jquery-ui-1.8custom.zip et copier les fichiers décompresser vers le dossier web ainsi:

js/jquery-1.4.2.min.js et js/jquery-ui-1.8.custom.min.js dans le dossier /web/js
css/jquery-ui-1.8.custom.css dans le dossier /web/css
renommer le dossier css/theme/images/ en jquery-ui-images et mettez le dans /web/images/
Ouvrez le fichier /web/css/jquery-ui-1.8.custom.css et remplacer « images/ » par « ../images/jquery-ui-images/ » pour corriger le chemin vers les images
calendar.png une petite icône qu’on affiche à coté du champs pour faire joli :p (à mettre dans /web/images/)

Maintenant il faut inclure les fichiers javascript et css dans view.yml de notre application (par exemple /apps/backend/config/view.yml) :

Ajout du fichier javascript

    javascripts:    [jquery-1.4.2.min.js, jquery-ui-1.8.custom.min.js]

Ajout du fichier css

    stylesheets:    [jquery-ui-1.8.custom.css]

4 – Mise en place du Widget dans la classe du formulaire

class PrescripteursForm extends BasePrescripteursForm
{
  public function configure()
  {
    $this->widgetSchema['date_debut'] = new sfWidgetFormJQueryDate(array('image'=>'/images/calendar.png'));
    $this->widgetSchema['date_fin'] = new sfWidgetFormJQueryDate(array('image'=>'/images/calendar.png'));
  }
}

Et le tour est joué ;) ça devrai ressembler à ça :

Partager cet article:

Tags :datepicker, jquery, jqueryui, sfFormExtraPlugin, sfWidgetFormJQueryDate, Symfony, symfony datepicker

Categorie: Symfony
(5) Commentaires

5 Commentaires to symfony: Utiliser sfWidgetFormJQueryDate avec sfFormExtraPlugin

Laurent

juin 1st, 2010 at 9 h 12 min

Bonjour Mohammed et merci pour ce tuto.

Que faut-il modifier pour que le champ date soit en un seul bloc au lieu des 3 (jour, mois, année) ?

Merci d’avance,

Laurent

Mohammed CHERIFI

juin 1st, 2010 at 9 h 33 min

@Laurent, il faut rajouter le paramettre ‘date_input’ à la chaine d’initiation du widget sfWidgetFormJQueryDate, ça donnerai pour un formulaire « Foo »

class FooForm extends BaseFooForm
public function configure()
{

$dateWidget = new sfWidgetFormInputText();
$this->widgetSchema['date_input'] = new sfWidgetFormJQueryDate(array(‘image’=>’/images/calendar.png’, ‘date_widget’ => $dateWidget);

}

et voilà le tour est joué :)

Roseny

juin 11th, 2010 at 6 h 24 min

Bonjour, comment fais-t’on pour mettre les mois en français?

Victor

juillet 23rd, 2010 at 16 h 02 min

Roseny : Pour avoir les mois en Français voici mon code :

$dateWidget = new sfWidgetFormI18nDate(array(
‘format’ => ‘%day%/%month%/%year%’,
‘month_format’ => ’short_name’,
‘culture’ => ‘fr’));
$this->widgetSchema['expirationdate'] = new sfWidgetFormJqueryDate(array(
‘image’ => ‘/images/calendar.png’,
‘culture’ => ‘fr’,
‘date_widget’ => $dateWidget));

J’ai aussi rajouté : uidatepicker-fr.js dans mon view.yml