58 · Dates formatted with Twig's date filter stay English on a translated site¶

Dates formatted with Twig's date filter stay English on a translated site

<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Many site template themes format dates with Twig's own <code>date</code> filter and a fixed PHP pattern, e.g. <code>{{ date|date('M j, Y') }}</code>. That filter is PHP's <code>date()</code>: it knows no translation, so month and day names stay English and the order stays American on every site, whatever its language. A German site shows "Oct 1, 2026" instead of "1. Okt. 2026". Numeric patterns in US order (<code>m.d.Y</code>) are read the wrong way round in most other languages ("10.01.2026" is 10 January there).</p>
<table>
<thead>
<tr>
<th>Theme (site template)</th>
<th>Where</th>
<th>Pattern</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vartheme BS5 and its copies (Varbase Starter, The Rightup, Educare, Horizon Aid)</td>
<td><code>components/atoms/date/date.twig</code>; Educare also <code>card-dated-vertical</code>; Horizon Aid <code>card-events</code> (<code>format_date</code> with <code>'j M'</code>) and the <code>M j, Y</code> default of <code>date</code></td>
<td><code>M j, Y</code>, <code>M</code>, <code>j M</code></td>
</tr>
<tr>
<td>Haven (<code>haven_theme</code>)</td>
<td><code>components/card/card.twig</code></td>
<td><code>j F Y</code></td>
</tr>
<tr>
<td>Event Horizon (Summit)</td>
<td><code>site-hero</code>, <code>includes/hero.twig</code>, <code>menu--schedule-tabs</code>, <code>views-view-unformatted--session-list</code></td>
<td><code>M d</code>, <code>d, Y</code>, <code>l</code>, <code>M j, Y</code>, <code>F jS</code></td>
</tr>
<tr>
<td>Goodwell</td>
<td><code>components/card-article/card-article.twig</code></td>
<td><code>M j, Y</code></td>
</tr>
<tr>
<td>Pulse</td>
<td><code>space-content-detail.twig</code></td>
<td><code>d M Y</code></td>
</tr>
<tr>
<td>Eureka (Archimedes)</td>
<td><code>hero-article.twig</code>, <code>vacancy-card.twig</code></td>
<td><code>D , d M, Y</code>, <code>F d, Y</code></td>
</tr>
<tr>
<td>Provus Base Theme (Provus EDU)</td>
<td><code>provus_base_theme.theme</code>, PHP <code>date()</code></td>
<td><code>F d, Y</code></td>
</tr>
<tr>
<td>Mercury, Byte, Diagnosis (Healthcare)</td>
<td><code>components/hero-blog/hero-blog.twig</code>, also used as the <code>datetime</code> attribute, which needs an ISO date</td>
<td><code>m.d.Y</code></td>
</tr>
</tbody>
</table>
<h3 id="summary-steps-reproduce">Steps to reproduce</h3>
<ol>
<li>Install Drupal CMS in German with one of these templates, e.g. Varbase Starter.</li>
<li>Open a blog post: the date reads "Oct 1, 2026".</li>
</ol>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>Use Drupal's date formatter, which translates month and day names: <code>{{ date|date('U')|format_date('medium') }}</code> with a date format of the site, or at least <code>format_date('custom', 'M j, Y'|t)</code> so the pattern can be translated. In PHP, <code>\Drupal::service('date.formatter')->format($timestamp, 'custom', ...)</code> instead of <code>date()</code>.</p>
<h3>Additional information</h3>
<p>Found with Drupal CMS 2.2 while installing the site templates in German (October 2026). Workaround: the Drupal CMS German Installer replaces these calls with <code>format_date</code> and a translatable pattern; German patterns come with Default Content Locale Extended (<code>translations/theme_dates.de.po</code>). Mercury: reported as <a href="https://git.drupalcode.org/project/mercury/-/work_items/3592164">#3592164</a>; the other themes keep their issues on drupal.org and still need one issue each.</p>