Translatable, custom dates in Twig templates of Drupal 8
Displaying different dates here and there in a site is a common task. Let’s see some examples how to handle it in Drupal 8 Twig!
During this tutorial we will work in the page.html.twig file. Of course I do not have to say that you have to have your own custom theme and your own page template there… :)
Display copyright message with auto updating end date
Let’s start with a simple task: display a copyright message in which the end date updates automatically. All we have to do is adding this short code to the template.
Let’s see what happens here! The first part is just a string to which I added the Drupal specific
t filter (could be
trans too). It makes the string translatable through the admin interface.
In the second part I used the now keyword which is supported by the
strtotime function of PHP. Then I added the
date() filter of Twig and set the format — using date syntax of PHP — to year only. And because it is year only it does not need to be translated.
Display the current date
Imagine that your customer wants the current date to be shown in the site header. It would be easy using the same technique as above. We should only change the format to include month and day too in the
But what happens if we build a multilingual site? Then we have to deal with the different date formats of the different languages as well. This makes our life and our code a little bit more complicated:
Let’s analyze it step by step again!
“Wait a minute, man! You did not pass any argument to the
date() function!” — you could say. Yes it is true. But I didn’t have to, because if no argument is passed, the function returns the current date.
Thereafter our ol’ friend, the
date() filter returns, and in this case we format the data with it as a Unix timestamp. This is needed because the second filter Drupal 8’s own
format_date() works with timestamp only. Its job is to transform the input to a date format which exists in Drupal. The date format can be defined by the system, a module or the administrator and we can choose it providing its machine name as an argument to the filter.
Now the variable is all set up let’s display the value of it! When we want to make a block of text — which includes variables — translatable it has to be surrounded by the
After the variable there are two new filters. The first is a Drupal specific one again: the
placeholder. If we wouldn’t use it, all new dates would generate a new translatable string.
I do not know the reason, but the
placeholder filter (or more precisely the invoked
drupal_placeholder() function) makes the content display as emphasized text. That is why we need the second filter
striptags. It “strips SGML/XML tags and replaces adjacent whitespace by one space”.
Display node published date and updated date
Let’s say that our customer wants the published date and the updated date of nodes displayed above the content title in full node view. Knowing and understanding the previous “current date” example it won’t be tricky. Only a small modification is needed.
So it is almost the same as before. There are just three things to mention.
First: we do not need the
date() function, because we are working with Drupal data now. If we were in node.html.twig, we may use the
date variable which displays a themed “creation date” field. But I do not know an equivalent for “updated date” and we are in page.html.twig. Thus we have to use
Second: the dates don’t need to be transformed to timestamp because Drupal uses that format already.
Third: there must be an
if statement around the code block to check if created and updated date information is available. Drupal provides this data on node pages only and without the check all other pages (eg. frontpage, user login, any views list etc.) would break.