Date display differences in node templates

Question

In a node template, if I use the following:

{{ content.field_event_start_date }}

The correct localized date and time will be displayed. For example:

Tuesday, February 14, 2017 @ 9:00am EDT

However, if I only want to display the time part and use the following:

{{ node.field_event_start_date.value|date("g:ia") }}

The incorrect time is displayed:

1:00pm

There appears to be a +4h offset when using the TWIG date() filter.

Drupal's Timezone is set to "America/New York".

How can I display only the time part so that it correctly displays the following?

9:00am

Also, can you please explain what conversion Drupal is performing on the time under the covers?

Thank you.

Answer 1

The proper thing to do here is to configure your field output to use the proper formatter. On the Manage Display for your content type, eg admin/structure/types/manage/page/display, change the formatter for your field_event_start_date field to Custom, then click on the gear and change the format to 'g:ia'. You should then be able to use {{ content.field_event_start_date }} in your template.

The standard Twig date() filter doesn't use the date.formatter service, so timezones and localization settings will not be honored.

TwigExtension defines a custom filter for Drupal that will call out to DateFormatter::format() called format_date(). This should work

{{ node.field_event_start_date.value|format_date("custom", "g:ia") }}

This apparently only works for Timestamp fields and not datetime or daterange fields.

Answer 2

You can preprocess your node in THEME.theme (or in a module if you prefer, note that my field is 'field_date' you will need to adapt to your field machine name).

I copy the field using another display formatter. I'm using datetime_custom formatter, but you can use whatever you want.

function THEME_preprocess_node(&$variables) {
  $node = $variables['node'];

  // Extract the hour from the field_date so we can easily display concert_time
  if(!empty($node->field_date)){
    $variables['concert_time'] = $node->field_date->view([
      'type' => 'datetime_custom',
      'settings' => ['date_format' => 'H:i'],
    ]);
  }
}

Then in your twig

{{ concert_time }}