You are here


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 . You can see this in action on at the bottom of the page.

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

= 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

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


Need A Developer? Contact Us