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:

 $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?

  • can you not simply 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 Aug 28, 2018 at 10:48
  • Do you know how I can change the format for the date? eg: 28th August 2018?
    – Ben
    Aug 28, 2018 at 11:57

2 Answers 2


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.

  • It seems to be picking up the date format from Drupal, not Civi. The date appears as 2018-08-25. I tried changing the short date format in Drupal to something a bit more readable, but this didn't affect the display in the webform.
    – Ben
    Aug 28, 2018 at 13:27
  • That is the storage format, e.g. the format used in the actual CiviCRM database. That's all you're going to get if you use a plain text field. You could however use javascript to make it look like whatever you want.
    – Coleman
    Aug 31, 2018 at 23:38

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.

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.