Why isn't my date metafield formatting correctly?

[DevBijan]

Hi all, I have a date metafield on my products but when I follow the formatting rules given in the Shopify docs, nothing changes.

{{ class.metafields.my_fields.class_date | date: "%a, %b %d, %Y" }}

This should result in something like 

Sat, Oct 30, 2021

but all I get is 

2021-10-18T17:00:00Z

Am I doing something wrong? Any help would be appreciated, thanks!

[mattrose · Accepted solution]

Hey @DevBijan, this is Matt from the Metafields team.

You're right, this is odd—piping a ISO-8601 string to the date filter should output the formatted date, like you've tried. I'll look into why this isn't working as expected. Can you point me to the docs that outlined this example?

In the meantime, you have a couple options. The first is access the date object by appending .value. This will return the date object, and allow you to format the date:

{{ product.metafields.my_fields.class_date.value | date: "%a, %b %d, %Y" }}

The other option is piping the metafield through the metafield_tag filter. This will automatically format the date using semantic HTML, but it won't give the fine grained control you're probably looking for.

{{ product.metafields.my_fields.class_date | metafield_tag }}

I hope this helps!

[DevBijan]

I started here under Date Filters which led me to the Ruby formatting guide which didn't work, so I looked around more and found this blog post which just kind of confirmed for me that I wasn't doing anything noticeably wrong.

Thank you for your response, using .value worked!

[DevBijan]

Hi, I noticed that the time being displayed is 4 hours ahead of what the metafield says, do you have any idea why?

Product metafield:

Output:

[mattrose]

Interesting—it could be that different timezones are being used. If you use %Z in your format, it will print out the timezone being used. Both the admin and your liquid storefront should be using the shops preferred timezone. If you share your store name, I can investigate further.

[DevBijan]

The output is being shown as UTC but the store admin is set to use Eastern time. The store is currently under development and I can't share it right now, sorry.

My code:

{% assign classes = collection.products %}

<div class="class-id">
  {% for class in classes %}
  <div style="border:1px solid black;">
    <p>{{ class.title }}</p>
    <p>{{ class.metafields.my_fields.class_date.value | date: "%A, %B %e, %Y at %l:%M %p %Z" }}</p>
  </div>
  {% endfor %}
</div>

[mattrose]

Thanks for sharing @DevBijan.

I can confirm that this is a bug. Date Metafields aren't respecting the stores timezone. I've opened up an issue to fix this asap.

In the meantime, as a work around, you can append an empty string before formatting the date—this will convert the metafield to a string, which will respect the shop's timezone as expected.

{{ class.metafields.my_fields.class_date.value | append: "" | date: "%A, %B %e, %Y at %l:%M %p %Z" }}

 
Thanks so much for taking the time to report this.

[DevBijan]

Thanks for the response, this works! And no problem, I'm glad I could contribute!

One quick final question, is there a simple way of sorting an array by a product metafield date? I've looked around and haven't found any working solution. All good if not, thanks!

[mattrose]

---

One quick final question, is there a simple way of sorting an array by a product metafield date? I've looked around and haven't found any working solution. All good if not, thanks!

---

Unfortunately there isn't a simple way to sort by metafield values. However, I could see how useful it would be to dig through attributes using the sort filter. Something like {{ collection.products | sort: "metafields.my_fields.my_date" }}. I'll relay this recommendation to the team. Thanks!

[KaiM]

Can you please tell the team that the MM/DD/YYYY format for displaying date is only used in 5 countries in the world (which includes 3 small countries). The rest of the world uses DD/MM/YYYY. I've bee npulling my hair out trying to get a metafield on a page to display date as DD/MM/YYYY and no luck yet. When I reach out to Shopify tech, they won't help and want an 'expert' to do it (of course I have to pay for what SHOULD BE a standard format/easy to select option).

[HighTides]

Hi KaiM, I am also trying to figure this out. I came across this. From 4min mark onwards. Hope it helps. 

https://www.youtube.com/watch?v=ioVWD5qaZ6U 

[adventmedia]

Also interested in how to edit the display of the date.

[birchr]

That is the incorrect format. Modern societies outside the US have adopted the sensible ISO 8601 standard of YYYY-MM-DD.  ISO 8601 provides unambiguous representation of date and time formats, something the DD-MM or MM-DD formats cannot do.  The principle is simple, each item moving right is a subset of that preceding it.

• 
  Adopted by CDISC 3.1 and W3C as date/time formats.
• 
  Platform and language independent.
• 
  Allows reduced precision (partial date/time).
• 
  Larger units are written in front of smaller units for consistency.
• 
  Easily readable, writeable, comparable, and sortable.
• 
  Avoid confusion; such as 01/02/03.
• 
  Allows basic format (20060607) and extended format (2006-06-07).

[billyaternesta]

is this still a bug?  i may be encountering the same issue

[KaiM]

When I use this (first one) i get JSON: Unexpected token. Please help. Shopify tech will not help.