14
sept

Réalisé avec Symfony : 1.4 + Doctrine + JQuery 1.8.4

Vous venez de créer un backoffice avec Symfony et vous souhaitez utiliser une interface plus jolie et intuitive, de type calendrier pour les champs de type timestamp.

Personnellement, j’ai opté pour jQuery DatePicker (http://docs.jquery.com/UI/Datepicker).

Pour la mise en place, je suis partit de ce tuto: http://www.lexik.fr/blog/symfony/symfony/symfony-jquery-datepicker-491, mais je m’y suis pris un peu différemment.

Le tuto date un peu, ma méthode m’a paru plus simple et plus rapide, alors la voici :

Prérequis

Avant tout chose, il vous faut :

$ symfony plugin:install sfFormExtraPlugin
$ symfony cache:clear

Mise en place

Modifier le fichier view.yml du module correspondant à votre module d’administration ( apps/backend/config/view.yml par exemple ), afin de charger les css et js que l’on vient de télécharger :

default:
  stylesheets:    [ ... , jquery-ui-1.8.4.custom.css]
  javascripts:    [ ... , jquery-1.4.2.min.js, jquery-ui-1.8.4.custom.min.js, jquery.ui.datepicker-fr.js]

Utilisation
Il faut évidement que le champ en question soit de type timestamp (voir config/schema.yml)

Personnellement, je veux appliquer mon DatePicker sur le champ start_date de mon modèle Event.

Donc je modifie le fichier lib/form/doctrine/EventForm.class.php de la façon suivante :

class EventForm extends BaseEventForm
{
  public function configure()
  {
    $this->widgetSchema['start_date'] = new sfWidgetFormJQueryDate(array(
      'image'=>'/images/calendar_icon.png', 'culture' => 'fr',
      'date_widget' => new sfWidgetFormi18nDate(array('culture' => 'fr')),
      'config' => array('firstDay' => '1')
    ));
  }
}

Détails

Pensez à vider le cache :

$ symfony cache:clear

Normalement,  vous pouvez sélectionner la date en question à l’aide d’un calendrier joli tout plein. (whaouu)

En passant le paramètre ‘image’=>’/images/calendar_icon.png’, on demande au widget d’utiliser l’image ‘/images/calendar_icon.png’ comme bouton pour afficher le calendrier afin que ce soit plus joli, pensez à mettre l’image de votre choix dans <votre projet>/web/images/, sinon ce seront des ‘…’ qui seront affichés à la place.

Allez, je suis sympa, voila celui que j’ai utilisé : (je sais il est pas super chouette, mais il a l’avantage d’exister et d’être libre)

Maintenant, faites la même chose avec tous les champs et modèles que vous souhaitez.

Hop, je crois que c’est tout bon….

, , , ,

692 Responses to “Utiliser jQuery DatePicker dans un admin Symfony en Français”

  • Add reply