Can't seem to format date in twig from UTC to User's locale

Question

I am trying to format the date field from an event content type that I've created so that I can pass the date into an event exporter that creates events in calendars such as Google, Apply, Yahoo, and Microsoft. I use calendar_link which takes a few fields and the dates to create the appropriate calendar event.

{# calendar_link(link_type, title, start_date, end_date, all_day, description, location) #}
{% set linkGoogle = calendar_link("google", node.field_event_title.value|raw|replace({'[html format="full_html" different_values="0"]': "", '[/html]': ""})|striptags, date(dateStartField), date(dateEndField), false, "", "") %}
{% set linkICS = calendar_link("ics", node.field_event_title.value|raw|replace({'[html format="full_html" different_values="0"]': "", '[/html]': ""})|striptags, date(dateStartField), date(dateEndField), false, "", "") %}
{% set linkYahoo = calendar_link("yahoo", node.field_event_title.value|raw|replace({'[html format="full_html" different_values="0"]': "", '[/html]': ""})|striptags, date(dateStartField), date(dateEndField), false, "", "") %}
{% set linkWebOutlook = calendar_link("webOutlook", node.field_event_title.value|raw|replace({'[html format="full_html" different_values="0"]': "", '[/html]': ""})|striptags, date(dateStartField), date(dateEndField), false, "", "") %}

This works fine. However, when I grab the date field, it's in UTC and not in the user's locale. I understand why, because Drupal stores dates as UTC in the database. (Note: node.field_event_start_date.value is equal to dateStartField as I just do some simple formatting with twig)

{{ node.field_event_start_date.value }}

I've found some suggestions such as the use of Intl extension of Twig which would give a Twig filter, localizeddate or format_datetime (I think localizeddate is the old version), but when I used composer to install the twig extensions (https://twig.symfony.com/doc/3.x/filters/format_datetime.html):

composer require twig/intl-extra
composer require twig/extra-bundle

it doesn't work. The filters aren't recognized by Twig. I've tried looking at information from here. I've seen others reference the notion of enabling Twig extensions for Symfony projects but I'm not sure where that would be on the backend of the Drupal site. See image attached for the filter error:

Code with format_datetime that is suppose to take into account the user's locale (On https://twig.symfony.com/doc/3.x/filters/format_datetime.html the default use of format_datetime is suppose to take into account the current locale):

<span>Calendar Start Date TimeZone Format: {{ calStartDate|format_datetime }}</span>

I'm almost at my wits end on trying to format my UTC dates into a localized date via Twig that I can feed into a calendar link exporter. I know I can format a date to a specific timezone with the basic Twig filters, but I can't check for what the user's locale is, thus making this approach void since the locale would be dynamic and not static.

Is there a better approach? Should I create a php hook that modifies the date fields for node--event.html.twig? Would this be appropriate? I don't think I'd need to create a module just for this simple issue but I'm not sure.

Let me know if you have any leads or solutions to any of my problems.

Thanks,
Tanner

Answer 1

It's hard to handle Drupals UTC date format with non-Drupal libraries, get the Unix timestamp:

{{ node.field_date.date.gettimestamp }}

Or better format Drupal fields with Drupal field formatters. In Twig you can use the |view filter of Twig Tweak:

{{ node.field_date[0]|view }}

You can add an array as argument for the field formatter settings. Even if you want to solve this in code only, configure a field formatter in UI temporarily and export the resulting config. Then you know the settings for |view(). See https://git.drupalcode.org/project/twig_tweak/-/blob/3.x/docs/cheat-sheet.md#view

You can do more things in PHP. See How to get formatted date string from a DateTimeItem object