Enhance your date input fields in symfony forms

Symfony’s forms are very powerful and big time-savers. Also, thanks for the integration with an ORM like Doctrine or Propel, managing dates is quite easy. But by default, symfony displays date fields as regular select lists where you pick the date (month, day, year, hour, minute)

It is actually quite easy to enhance this functionality and display a friendlier way to pick a date. There are several options at your disposal:

sfFormExtraPlugin

The sfFormExtraPlugin plugin has numerous widgets to improve the appearance and functionality of form input fields. One of them is sfWidgetFormJQueryDate which displays a button next to your field. When clicking on it, a date picker calendar-style pops up.

Note: You will need to download the jquery theme to make it look pretty.

To use it, simply install the plugin and add the following to your form configure() method:

        $this->widgetSchema['publish_at']= new sfWidgetFormJQueryDate();

Also, make sure you load the jquery javascript files in view.yml:

  javascripts:
    - http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
    - http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js

sfJQueryUIPlugin

The sfJQueryUIPlugin plugin is a nicer option. It displays a date picker when you click on the date input field, but it still allows you to modify it manually.

Installation is also quite easy. Install the plugin and add the following to your form configure method:

        $this->widgetSchema['publish_at']= new sfWidgetFormDateJQueryUI(array('change_month' => true, 'change_year'=> true));

Unobtrusive Datepicker

The Unobtrusive Datepicker by Massimiliano Arione is probably the nicer of the options, but also the less straightforward as there is no aparent plugin for it yet.

Follow the instructions on the site to get it working.

Any others?

Have you found any other solutions? Let us know and share it with us!

04

02 2010
  • http://pulse.yahoo.com/_IWWEDINKZB2XPBW6LMSJ73HZ6E garakkio

    I’m the author of Unobtrusive Datepicker. I would just point out:
    - there’s an improved version of my Datepicker, based on jQuery UI: http://garakkio.altervista.org/datepickerui/
    - there’s no plugin of my Datepicker just because there’s no need of a plugin. The whole idea of a Javascript plugin for symfony is just wrong. A Javascript solution must be pure-Javascript (just like mine). Since many people have difficult to understand this point, I packaged an archive with all neeede files (in a symfony way, e.g. Javascript files under web/js directory and so on).

  • Fabian

    Personally, i found the Unobstrusive Datepicker the best choice, you don’t have to define the widget for every date field. The only thing it lacks is a year input box like the sfJQueryUIPlugin.