Using jQuery UI DatePicker in Symfony

The easiest way to use to use the jQuery UI datepicker is to install the sfFormExtraPlugin.

symfony install:plugin sfFormExtraPlugin

Getting the Libraries

You have to download the jquery library and the jquery-ui library, actually I found out that the jQuery UI zip includes the jQuery library. Since I'm developing in spanish I require the i18n javascript for jQuery UI. I couln't find it on the jQuery UI site (but I didn't look very hard). I found the script at http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/i18n/jquery-ui-i18n.min.js. My project doesn't have access to the Internet so I copied and pasted the code into /web/js/jquery-ui-i18n.min.js.

You need to copy your jquery-1.4.2.min.js, jquery-ui-1.8.6.custom.js and jquery-ui-i18n.js to the /web/js directory (the versions for the libraries will change depending on when you read this post). On your jQuery UI zip there is a css folder inside it you'll find folder with the theme you selected in my case its a folder named smoothness copy this folder to /web/css folder.

Declaring the Libraries and CSS in Symfony

In the /apps/myapplication/config/view.yml make change to declare the javascripts and css files.

  stylesheets:    [main.css, smoothness/jquery-ui-1.8.custom.css]

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

Editing the the Form Class

Edit your form class /form/doctrine/myclassForm.class.php and change the date widget to sfWidgetFormJQueryDate it should look something like this:

public function configure() {
    $current_user = sfContext::getInstance()->getUser();
    $culture = substr($current_user->getCulture(), 0,2);
    $this->widgetSchema['requestDate'] = new sfWidgetFormJQueryDate(array(
              'image'=>'/images/calendar.gif',
              'config' => '{}',
              'culture' => $culture
            ));
}

The image is to have custom button, config is javascripts configuration data (I don't know what this does), culture is to have the date picker in your language. I originally tried to to pass the users culture to the culture option. My culture is es_PA (spanish Panama) and when I passed it to the culture option it showed the days and months in what I believe is Mandarin. I realized that what the widget recognizes as culture is actually just the language so I used the substr function to extract the first two letters from the culture.

Now publish the assets running the following command:

symfony plugin:publish-assets

Now you're ready to display a a datepicker besides you're date variable in the form.

You still get the comboboxes for days, months and years and beside it you get a button that will display a calendar and let you select date. I'm working on getting a read only input textbox besides the calendar button instead of the comboboxes.

Enjoy!!!