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:


Or is there another, even better way?

| improve this question | | | | |

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

| improve this answer | | | | |
  • I had never used '#after_build' before, but it did the trick. For other folks new to this form API property, it takes an array of function names that are called with $element and $form_state as parameters. Handy for adding custom js to a specific element. I also looked into defining my own element (a la Date project) but decided that was overkill. – meriial Apr 4 '11 at 20:31
  • Used your tips here to put together covenantdesign.com/blog/… – Joshua Stewardson Nov 17 '12 at 6:47

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.

| improve this answer | | | | |

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')) {
    global $language;
    if ($language->language != 'en') {
  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.

| improve this answer | | | | |
  • This worked like a charm for my purposes, which was to add a custom datepicker to a webform. – RevNoah Jan 15 '14 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.