You are here

Blog

Drupal 7 - Change webform date select to textfield with calendar popup

webform date select with calendar popup

The default Webform date field uses 3 select fields but this will convert the calendar image into a text field that pops up the calendar when you click inside it and hide the select fields. This also works with inline labels using the In Field Labels module https://drupal.org/project/In-Field-Labels . You can see this in action on http://www.hangglidecr.com at the bottom of the page.

Add webform-calendar.tpl.php to your theme with the following code:

<?php
 $idKey
= str_replace('_', '-', $component['form_key']);
?>

<input type="text" id="edit-submitted-<?php print $idKey ?>" class="form-text <?php print implode(' ', $calendar_classes); ?>" alt="<?php print t('Open popup calendar'); ?>" title="<?php print t('Open popup calendar'); ?>" />

Then add the following to your css:

.webform-container-inline.webform-datepicker  div.form-item.form-type-select {
    display: none;
}

Thanks to FAAREIA for the suggestion https://drupal.org/node/1238628#comment-5380746

You can download the attached file and rename to webform-calendar.tpl.php

Drupal
Webform

Need A Developer? Contact Us