Vertical Tabs and CCK Date Fields

Last updated February 27, 2011. Created by FatherShawn on February 16, 2010.
Edited by aspilicious. Log in to edit this page.

I wanted to have two CCK date fields used for Publication Start and End dates displayed in a single Vertical Tab. Here's how I made it work.

Define a CCK Date Fields and Group

Define 2 CCK Date Fields on the Manage Fields tab.
1. Use a unique name for each.
2. Do not use a "To" value.
Define a Group on the Manage Fields tab.
Drag your date fields into the group on the Manage Fields tab.

Build the Custom Module

You use this little module to add the needed values to the fieldset array. You need four files in their own folder in (/sites/all/modules). Replace custom_module_name with a unique name for your module. If you have multiple CCK field Vertical tabs, you can use one custom module for all of them, but use individual javascript files for each tab for ease of debug and maintenance.

custom_module_name.info

name = Some Custom Summaries
description = Adds hooks and javascript to show summaries for the CCK fields created for this site.
core = 6.x
dependencies[] = fieldgroup
dependencies[] = vertical_tabs
package = User interface

custom_module_name.install

CCK's fieldgroup module has a weight of 9 so we need to set the weight of our little module to 10 or higher. Note: Drupal coding standards omit the closing ?> tag, but it's included in these examples for proper wiki formatting. Don't put it in the file.

<?php
function custom_module_name_install() {
  db_query("UPDATE {system} SET weight = 10 WHERE name = 'custom_module_name'");
  }
?>

custom_module_name.module

<?php
/**
* Implementation of hook_form_alter().
*/
function custom_module_name_form_alter(&$form, $form_state, $form_id) {
     // Only include on page and story node add/edit forms.  Adjust these lines based on your content types.
   if ($form_id == 'story_node_form' || 
      $form_id == 'page_node_form')    {
      $form['group_name']['#attached'] = array(
          'js' => array('vertical-tabs' => drupal_get_path('module', 'custom_module_name') . '/group_name.js',),
      );
   }
  }
?>

group_name.js

This file sets the javascript that will be loaded on to produce the summary. Use Firebug or some browse the source of your node edit page to get the ID of the input element with the date value you want displayed on your tab. I don't have end dates on my page content, so I also test for that.

Drupal.verticalTabs = Drupal.verticalTabs || {};

Drupal.verticalTabs.group_schedule = function() {
  var startDateID = document.getElementById('edit-field-publication-start-date-0-value-datepicker-popup-0');
  var endDateID = document.getElementById('edit-field-publication-end-date-0-value-datepicker-popup-0');
  if (endDateID != null){ 
    return startDateID.value + " - " + endDateID.value;
    }
  else  {
    return startDateID.value;
    }
}

That's all it takes. Enable your module and test by loading the appropriate Create Content page.