Recently I had a client ask me to do something I'm shocked I've never been asked to do. They wanted to display the start time of an event in both Eastern time and Pacific time. I figured this has to be something that is commonly wanted/needed. So here it goes.
Within an event, Nationbuilder's event page-type gives us this object:
{{ event.local_start_at }}Normally, it comes with some formatting tags attached which cause the display of that can look something like this:
{{ event.local_start_at | date: '%B %d, %Y at %I:%M %p' }}
Example display: October 31, 2021 at 3:15 pm
The characters in that date filter correspond to inputs that are conveniently the same as Ruby's Time.parse. This is because the object itself is a datetime not just a string of months/days/numbers. Using Liquid allows us to request all possible info from that particular date/time. For my particular example I want to convert the datetime into just seconds '%s' otherwise known as Unix Epoch time.
Once we have the Epoch, we simply subtract the number of seconds (25200 for Pacific Time) that your required time zone is from the UTC. Then, convert that back to a usable datetime format (since not many of us use Unix time when we check our calendars) with the magic of Liquid.
{% assign time_sec = child.event.local_start_at | date: '%s' | minus: 25200 %}
{{ time_sec | date: '%I:%M %p' }} PDT
In my example this gives me this: 12:15pm PDT
This is a pretty manual approach to handling this, but it takes <15 mins and 3 or so extra lines of code so it's very convenient.
Helpful links:
- https://shopify.github.io/liquid/filters/date/
- https://www.epochconverter.com/timezones
