I am using Drupal 8 core DateTime Range module and Date module in core to list date start and end date.

I have set various criteria and allowed content editors to set date/time under certain ranges with paragraphs module for events.

  1. Event only has date. Created a date field using paragraphs module.

  2. Event has date with start and end time. Created a date field and datetime range field with only time ranges using paragraphs module.

  3. Event has start and end date. Created a datetime range fields using paragraphs with date ranges using paragraphs m.

  4. Event has start and end date with time. Created two datetime field one with date ranges and another with time ranges using paragraphs.

Now for theming I need to target each field separately as each field represents different format and style. However while using paragraphs inside node and adding any one of datetime field to node using paragraphs does not allow me to determine which field it is or what view mode that datetime field is using.

This makes it difficult to theme those fields individually/seperately.

Also, while using views pages and rendering those datetime field on a pager based page view, same, it does not show what machine name/view mode its using for paragraphs.

I implemented hook_theme_suggestions_time_alter function to determine the machine name and view mode, but no information was available for said field.

I would like to each part of field in datetime field separately and differently while rendering using views and differently while rendering in full view mode of node.

1 Answer 1


The best way to Debug this is to enable twig debug open up or create sites/default/services.yml


 http.response.debug_cacheability_headers: true
   auto_reload: true
   cache: true
   debug: true

once done run drush cr or clear your cache

then go to the page with the paragraphs on them and inspect the element in chrome you will see ... some thing like

  * field--paragraph--field-range--event.html.twig
  * field--paragraph--field-range.html.twig
  * field--paragraph--event.html.twig
  * field--field-range.html.twig
  * field--daterange.html.twig
  x field.html.twig

then theme the new field templates to your liking

  • These are paragraph fields templates that I am getting, however what I want to target is time field templates not paragraphs field. I have already enabled debug mode and set up view mode for paragraphs. I want to theme those time fields with individual designs for each time field type defined within paragraphs.
    – sarathkm
    Commented May 9, 2018 at 6:43
  • field--paragraph--field-range--event.html.twig allows to theme a group of fields defined within a particular type. I would like to target the time.html.twig within that paragraph type and theme those 4 type of structure so as to display in node full view page and views page.
    – sarathkm
    Commented May 9, 2018 at 6:49
  • I was expecting view mode for time field. I guess its not possible. I see view mode for paragraphs though.
    – sarathkm
    Commented May 11, 2018 at 3:21

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.