Re: Date metafield formatting not working

Solved

Why isn't my date metafield formatting correctly?

DevBijan
Shopify Partner
54 2 17

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!

Accepted Solution (1)

mattrose
Shopify Staff (Retired)
12 4 6

This is an 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!

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 14 (14)

mattrose
Shopify Staff (Retired)
12 4 6

This is an 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!

To learn more visit the Shopify Help Center or the Community Blog.

DevBijan
Shopify Partner
54 2 17

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
Shopify Partner
54 2 17

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:

DevBijan_1-1634577201702.png

 

Output:

 

DevBijan_0-1634577157357.png

 

mattrose
Shopify Staff (Retired)
12 4 6

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.

To learn more visit the Shopify Help Center or the Community Blog.

DevBijan
Shopify Partner
54 2 17

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.

 

DevBijan_0-1634651162277.png

DevBijan_1-1634651176761.png

DevBijan_2-1634651350486.png

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
Shopify Staff (Retired)
12 4 6

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.

To learn more visit the Shopify Help Center or the Community Blog.

DevBijan
Shopify Partner
54 2 17

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
Shopify Staff (Retired)
12 4 6

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!

To learn more visit the Shopify Help Center or the Community Blog.

KaiM
Excursionist
19 0 3

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
Visitor
3 0 0

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
Pathfinder
128 0 33

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

birchr
Shopify Partner
9 0 1

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
Shopify Partner
3 0 3

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

KaiM
Excursionist
19 0 3

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