Can I attach a jquery.ui.datepicker widget to a form element using the form api?

Question

I have a generic form element:

$form['date'] = array(
    '#type' => 'textfield',
    '#title' => t( 'Date' ),
);

That I want to add the jquery ui datepicker to this element. Is there a way to do this through the form api, or do I have to add the following using drupal_add_js:

$('#edit-date').datepicker();

Or is there another, even better way?

Answer 1

You can use after_build in your form to call a function that contains drupal_add_js

Answer 2

A much easier solution to this is to install the Date and Date Popup modules and use the following form api element to instantly get a date popup element. No extra js including needed.

$form['date'] = array(
  '#type' => 'date_popup',
  '#title' => t('Date'),
  '#date_format' => 'd/m/Y',
);

The #date_format attribute accepts a PHP Date formatted string which is used as the input format for the date field.

Answer 3

The Date project contains a module (date_popup.module) that implements a date_popup form element. date_popup.module for Drupal 6 defined the date_popup_load() function, but the function is not present in the version for Drupal 7 of the module, nor is it a Drupal core function.

What the function did was to include the necessary JavaScript files.

  $path = drupal_get_path('module', 'date_popup');
  if (module_exists('jquery_ui')) {
    jquery_ui_add('ui.datepicker');
    global $language;
    if ($language->language != 'en') {
      jquery_ui_add("i18n/ui.datepicker-{$language->language}");
    }
  }
  if (variable_get('date_popup_timepicker', 'default') == 'default') {
    drupal_add_js($path . '/lib/jquery.timeentry.pack.js');
  }

The equivalent function present in the Drupal 7 version of the module is date_popup_add(), which contains the following code.

drupal_add_library('system', 'ui.datepicker');
drupal_add_library('date_popup', 'timeentry');

// Add the wvega-timepicker library if it's available.
$wvega_path = date_popup_get_wvega_path();
if ($wvega_path) {
  drupal_add_js($wvega_path . '/jquery.timepicker.js');
  drupal_add_css($wvega_path . '/jquery.timepicker.css');
} 

That function is called from date_popup_element_process(), which is the #process function used from the date_popup form field. You could write a #process function containing code similar to the one executed from that function, and attach it to the form field to which you want to add the date picker.