Change article date format

Question

I'd like to change the date format that is used for articles in Drupal 8. It looks like it uses the Default medium date format by default. I added my own format at admin/config/regional/date-time, but I can't find where to edit the format that articles use.

Is there a way to do this from the CMS or does this need to be done in code?

Answer 1

So after spending more time than I care to admit looking into this, I've come up with two solutions to this.

Solution 1

One way to do it is with the date function that darol100 mentioned in his answer. Modifying his example for my case, in my node--article.html.twig file, I changed:

{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}

to

{% set createdDate = node.getCreatedTime|date('j F Y') %}
{% trans %}Submitted by {{ author_name }} on {{ createdDate }} {% endtrans %}

The advantage to this approach is that it's easy and quick. The disadvantage is I'm not using Drupal's built-in date format system.

Solution 2

In order to use Drupal's date format system, I first created my custom format at admin/config/regional/date-time. Then I edited node--article.html.twig as follows:

{% set createdDate = node.getCreatedTime|format_date('my_custom_format') %}
{% trans %}Submitted by {{ author_name }} on {{ createdDate }} {% endtrans %}

This assumes I named my custom format "My Custom Format", which results in the machine name my_custom_format.

While this solution requires an extra step, I feel it's the more Drupal way to do it.

I learned about it on this page about Drupal's Twig Filters.

Answer 2

If you want to change the date format base on article content type level. You can edit/add the following code post.published_at|date and use a filter to alter the date format.

node--article.html.twig

{# Here are few example #}
{{ post.published_at|date(format='j  F  Y') }} {# Output = 10 March 2001#}
{{ post.published_at|date(format="F j, Y, g:i a") }} {# Output = March 10, 2001, 5:16 pm#}
{{ post.published_at|date(format='m/d/Y') }} {# Output 10/3/2001 #}

Twig use the same naming code as php date format. For more information about twig date formats visit - http://twig.sensiolabs.org/doc/filters/date.html

Answer 3

I'm more for Chris's solution 2. As he says it IS more the drupal way... but it's not the best option yet.

format_date() has been deprecated and will be removed before Drupal 9... meaning that one day, you'll do a drupal update and this will break.

Instead, it's better to do this in your .theme file in a preprocess function.

function [theme_name]_preprocess_node(&$variables) {
  $variables['date'] = \Drupal::service('date.formatter')->format($variables['node']->getCreatedTime(), 'my_custom_format');
}

Answer 4

It is also possible to find the date format already in use, and just change that in the UI. Just compare what you see on the page with the date formats in admin/config/regional/date-time/

If you change eg "Default medium date" it will change the dates using this format without touching any template/twig files.

Date formats can also be set/translated per language for multi language setup.

Answer 5

An observation about what Duke said:

format_date() has been deprecated and will be removed before Drupal 9...

Yes, Drupal function format_date() defined in core/includes/common.inc is, in fact, deprecated. But, when you use the twig filter format_date() you are NOT calling that Drupal function, instead of that you are using the twig filter defined by Drupal in TwigExtension::getFilters(), and this filter calls DateFormatter::format().

Hence, using the twig filter format_date() is safe and Chris's solution 2 is fine.

Answer 6

You can customize the format in node.html.twig like this:

{{ node.createdtime|date(format="Y-m-d") }}

Answer 7

You can create your own Submitted By field by using Display Suite to create a Token Field.

In Drupal 8 /structure/ds/fields

Then add a field using html and tokens like...

By [node:author] on [node:created:custom:F j, Y]

Answer 8

To be sure that I change only the characters of the date but not any surrounding HTML elements, I use the following hook:

function [theme_name]_preprocess_field(array &$variables) {
  if ($variables['field_name'] === 'created') {
    $timestamp = $variables['element']['#items']->value;
    $markup = \Drupal::service('date.formatter')->format($timestamp, 'html_date');
    $variables['items'][0]['content']['#markup'] = $markup;
  }
}

Replace [theme_name] with the name of your theme and html_date with your desired time format, one of those you find under /admin/config/regional/date-time.

Answer 9

You can have all the formats PHP for Date and Time

// Assuming today is March 10th, 2001, 5:16:18 pm, and that we are in the
// Mountain Standard Time (MST) Time Zone

date("F j, Y, g:i a");                 // March 10, 2001, 5:16 pm
date("m.d.y");                         // 03.10.01
date("j, n, Y");                       // 10, 3, 2001
date("Ymd");                           // 20010310
date('h-i-s, j-m-y, it is w Day');     // 05-16-18, 10-03-01, 1631 1618 6 Satpm01
date('\i\t \i\s \t\h\e jS \d\a\y.');   // it is the 10th day.
$today = date("D M j G:i:s T Y");               // Sat Mar 10 17:16:18 MST 2001
date('H:m:s \m \i\s\ \m\o\n\t\h');     // 17:03:18 m is month
date("H:i:s");                         // 17:16:18
date("Y-m-d H:i:s");                   // 2001-03-10 17:16:18 (the MySQL DATETIME format)


{% set createdDate = node.getCreatedTime|date('F j, Y, g:i a') %}
<div class="newsSingleAuthorDate">
      {% trans %}Submitted by <span>{{ author_name }}</span>  on {{ createdDate }} {% endtrans %}
</div>

Answer 10

I used the following code for node--article--full.html.twig :

<li class="post-date">
    {% set day = node.createdtime|date("d") %}
      <span class="day">{{ day }}</span>
    {% set month = node.createdtime|date("M") %}
        <span class="month">{{ month }}</span>
 </li>


{% set date = node.createdtime|date("M d, Y") %}
   <span>{{ date }}</span>