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?

3 Answers 3


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

  • 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, 2011 at 20:31
  • Used your tips here to put together covenantdesign.com/blog/… Nov 17, 2012 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.


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.

  • This worked like a charm for my purposes, which was to add a custom datepicker to a webform.
    – RevNoah
    Jan 15, 2014 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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