Replace Webform Date Select Dropdowns with Textfield

Question

I am using a webform to edit cases in CiviCRM. I have a date field which I want to display, but keep disabled (the case start date). I want to replace the three select fields (day, month and year) with a single text field.

The three select fields cannot be disabled and I do not want users to be able to change the date, but only to view it. It would also look a lot neater if it was just a single field.

I tried the solution given here, which uses a template suggestion to overide the webform template, but this doesn't work for integrated CiviCRM (date) fields.

The solution referred to above was to create a template called webform-calendar.tpl.php 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'); ?>" />

And also adding the following css:

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

This would then get triggered for the webform date field. But this template does not get triggered for the CiviCRM date field.

Can anyone suggest how I can either adpat this method or use a different way to replace the select fields with a single text field for the date, or at least disable the select fields?

Answer 1

Following my comment, you can edit the case start date component and change the widget to be a textfield. I was also able to disable the field on my webform.

As you have a disabled text field, not sure what you mean by changing the date format. If it needs to be done in civi, you can navigate to Administer -> Customize Data and Screens -> Date Formats.

Answer 2

It wasn't for the date field, but I've also had a scenario I need to display a field but not have it look editable. I ended up going the custom style route (the field itself was disabled but as you've noted did not look very clean.)

With css you could you remove the border/select options (perhaps reduce padding) on those particular select fields so they no longer look editable but stay in the correct order.