Drupal - Using built in jQuery UI in my theme

Adding JS to a page is really not that hard, even though you need to use php.

For normal JS files, you could do something like this

drupal_add_js($path_to_js)

Drupal has however registered jQuery UI into libraries making it easier to add both JS and CSS files for certain jQuery UI plugins. This can be done using

drupal_add_library($module, $library);

All the jQuery UI plugins exist in the system module, so you could do

drupal_add_library('system', 'ui');

or

drupal_add_library('system', 'ui.accordion');

Some of these plugins have dependencies because they use other plugins. Drupal handles this very cleverly and will included the components needed.

You can see the full list of jQuery plugins here. This is formatted as a PHP array, but generally the naming convention is ui.PLUGIN-NAME.

If you need to add the JS on every page you could simply add a preprocess page hook and add them there. This would look something like this in the template.php file.

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}

have you tried the date_popup module? works good with the form API


  1. Refactor your hard-coded form in the .tpl file into a Form API implementation. Like @LSU_JBob said, there is no reason why you should be creating a form without using FAPI. I recommend you read the Form API Quickstart Guide, and bookmark the Form API reference page.
  2. Once you have your form built and you are able to submit values to it, process it, etc., download and read the code in the Date contrib module. Date is used to provide the kind of date popup you want to create, but for CCK in D6 and Core Fields in D7. Although you are not looking to work with fields, the Date module uses JQuery UI to accomplish what you are trying to do. This module should give you a solid example.