Nerds who love the symfony-project
5 May
This is a quick tip that will hopefully save you some time. The sfFormExtraPlugin is an excellent plugin with lots of extra features to help you build your forms. This tip is regarding the sfWidgetFormJQueryDate widget. This Widget lets you create a jQuery date selector. Setting up this widget is simple, but not well documented. Here are the basic steps of getting this started in your project forms:
1. Install the sfFormExtraPlugin
./symfony symfony plugin:install sfFormExtraPlugin
2. Install relevant jQuery libraries:
a) Download jQuery AND
b) Download jQueryUI
3. Setup jQuery in your project
Extract the JavaScript libs to your project js folder, then modify your app view.yml to include them:
javascripts: [jquery-1.3.2.min.js, jquery-ui-1.7.1.custom.min.js]
Note: The order in which the jQuery libs are included are important and can cause a conflict if they are not in the order above.
4. Setup the CSS for jQuery UI
When you download the jQuery UI, extract the smoothness theme into your web css directory. IE:
/web/css/smoothness
Now include the relevant CSS in your app view.yml:
stylesheets: [main, smoothness/jquery-ui-1.7.1.custom.css]
5. Setup the Widget your form class:
Note in my example below, I will have an image icon as the date selector (/images/icons/calendar_view_month.gif). This is what the form class will look like:
class myForm extends sfForm { public function configure() { $this->setWidgets(array( 'from_date' => new sfWidgetFormJQueryDate(array( 'image'=>'/images/icons/calendar_view_month.gif', 'format' => '%day%/%month%/%year%') ), //...other widgets )); $this->widgetSchema->setLabels(array( 'from_date' => 'From Date', //...other labels )); } }
6. Display it in your view:
Action:
public function executeSearch(sfWebRequest $request){ $this->form = new myForm(); return sfView::SUCCESS; }
View:
.... echo $form['from_date']->renderLabel().":".$form['from_date']; ....
And that’s it! You should get something looking like this:

Hope this helps.
21 Responses for "Symfony Quick Tip: Using sfWidgetFormJQueryDate with the sfFormExtraPlugin"
I dont really get why you want to use a plugin and a special widget for such a simple job. This is how I turn all input fields with class “cal” into a nice jQuery datepicker.
[code]
$(document).ready(function() {
$(”input.cal”).datepicker({ changeYear: true });
});
[/code]
Is there any way to use this widget with time for datetime fields? I figured out how to use the jQuery date widget but gave up because there seemed no way to do time easily (there is an extension to jquery somewhere but it seems like an awful hack). A response would be much appreciated.
Great tip very useful ! thanx
Great write up, thanks!!
One question, how do I format the returned values to be inserted with Doctrine? When I dump the values returned when the form is submitted the date is an array and I keep getting validator error for type.
Thanks for your help!!
Mike
Si les da el error ‘class sfWidgetFormJQueryDate not found’ se debe a que no esta habilitado el plugin en config/ProjectConfiguration.class.php,
deberia haber una linea como:
$this->enablePlugins(array(’sfFormExtraPlugin’));
Saludos!
Thanks a lot for this post
You can translate it by adding a culture option and add a little script.
For more information have a look to:
http://docs.jquery.com/UI/Datepicker/Localization
I would also be interested in a version with the time.
Cheers,
[...] http://symfonynerds.com/blog/?p=213 [...]
Great writeup. I have been looking for this shortcut or how to make the jquery date control work in my symfony sample application. default nature of the date control widget with drop downs doesn’t look good.
Its good solution you have given, I will try it.
I wrote a nice solution based on jQuery datepicker:
http://garakkio.altervista.org/datepicker/
Thanks!!! Nice post!
Just a quick note: if you want to localize the UI, you will have to manually include your language file (download from http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ )
to make this work.
Hi,
that’s a great tip, but :
- How can i get the “real web path” for the image tag…
When i put ‘calendar.gif’ , or ‘images/calendar.gif’ , or ‘/images/calendar.gif’, the path is never correct, when
image_tag(’calendar.gif’) is working correctly.
This a useful post, thanks.
One thing I found with it was that the code given above fails with a change to the plugin (it now extends sfWidgetForm rather than sfWidgetFormDate).
You have:
new sfWidgetFormJQueryDate(array(
‘image’=>’/images/icons/calendar_view_month.gif’,
‘format’ => ‘%day%/%month%/%year%’)
),
The ‘format’ option doesn’t work (and indeed causes an uncaught exception. Instead, you need to pass the widget a normal sfWidgetFormInputDate:
new sfWidgetFormJQueryDate(array(
‘image’ => ‘images/icons/calendar_view_month.gif’,
‘date_widget’ => new sfWidgetFormDate(array(’format’=>’%day%/%month%/%year%’))
))
Just a tip for those who instal sfFormExtraPlugin manually (but downloading and putting in the plugins folder) it HAS to be named “sfFormExtraPlugin” - I just put a copy in called “sfFormExtraPlugin-1.1.1″ and it’s not loaded…
Andreas:
“…Just a quick note: if you want to localize the UI, you will have to manually include your language file (download from http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/ )
to make this work…”
Where should I put language jquery.ui.datepicker-.js file? It doesn’t work yet.
tfe:
You need to use absoulte path to your image according to your web server path.
Exelent post, but, how can i to translate it to spanish. i realy aprtiate any comment about this.
sorry my english
The format string like discribed above is not working in my case. If i do insert the string:
new sfWidgetFormJQueryDate(array(
‘image’ => ‘images/icons/calendar_view_month.gif’,
‘date_widget’ => new sfWidgetFormDate(array(’format’=>’%day%/%month%/%year%’))
))
I always get the fallowing error:
sfWidgetFormJQueryDate does not support the following options: ‘0′.
Anyone any idea ?
@Ruthy: there is a problem with the quotation marks…
use this:
new sfWidgetFormDate(array(’format’=>’%day%/%month%/%year%’,));
@all: no matter what I do, my date picker does not show up. any suggestions?
I’m going to try once again by replacing
‘image’=>’/images/icons/calendar_view_month.gif’
by
‘image’=>’”/images/icons/calendar_view_month.gif”‘
Tricky business
Leave a reply