Adding wrapper elements within a date format

The Smart Date formatter does include a configuration option to "Add classes", which will add spans around the date and time values. Have you tried enabling that?

I've tried that. It seems to add a span around the date and around the time, but not spans around the individual parts of the date like I would like. For example, I would like a span around the 10 in "10 March, 2023" here.

I'm currently trying to do this with twig templates, which seems to be promising but the tradeoff seems to be losing a lot of the advanced features of smart date in the process, since I need to manually render all aspects of the date and time in the template and add my own logic for when to show the separator, etc.

You should be able to accomplish what you want using a preprocess function in your theme. By design Smart Date keeps its output as a render array, and IIRC even keeps the raw timestamp in the array, which should give you lots of flexibility to add extra wrappers to meet your needs.

I tried to add wrapper element by using the preprocessor. I only added the wrapper for default formater.
The output is as follows:

Nice that you got it working. :-)

That preprocessing code belongs in your theme, not in Smart Date, since it will only work with your date string.

Thanks, this is helpful. I was able to get the patch above working by moving the code to my .theme file in hook_preprocess_time(). This is definitely getting me in the right direction.

I'm not finding any documentation though on which theme hooks are available. I don't see "preprocess_time" anywhere in Drupal core or smart_date. Is there somewhere I should be looking to find which theme hooks are available?

Thanks for your help!

Maybe what you're looking for is hook_preprocess_field?

I ended up taking a slightly different approach:

1) Changed the smart date format to only display the month and year (not the date)

F, Y

2) Used hook_preprocess_node in the .theme file to clone the smart_date field

    $variables['content']['field_smart_date2'] = $variables['content']['field_smart_date'];
    $variables['content']['field_smart_date2']['#field_name'] = 'field_smart_date2';
// swap date items
    [$variables['content']['field_smart_date'], $variables['content']['field_smart_date2']] = [$variables['content']['field_smart_date2'], $variables['content']['field_smart_date']];
  }

3) Created a twig template to change the output of this new cloned field to render the day

field--node--field-smart-date2--event.html.twig

<div class="smart-date--day-only">{{ items.0['content']['#value']|date('j')  }}</div>

This results in an output that looks like this

A little complicated, but sharing this in case others find this approach useful.

Thanks for your help on this. I think we can close the issue.

Thanks for sharing what worked for you. This would be great material for a handbook page

I would love an official how to on how to do this, also in this same boat.