Alter Date Field Format in Custom Code Embed

I don’t want the month of a custom date field in an Embed to be abbreviated.

I’m using custom code in an Embed element because I am forced to hack around the lack of support for dynamic fields in custom attributes in order to reference a date for the <time> element’s datetime attribute.

The code below—originally copied from the HTML Embed Code Editor with fields and pasted into Notepad—does give me the rearranged with hyphens format that I want to see as the datetime value when I inspect with Chrome DevTools. But if I try to change the display instance from MMM DD, YYYY both values break/disappear.

<time datetime="{{wf {&quot;path&quot;:&quot;release-date&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYYY-MM-DD&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }}" itemprop="datePublished">{{wf {&quot;path&quot;:&quot;release-date&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;MMM DD, YYYY&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }}</time>

I tried different date formats from the Internet to no avail, which I assume is my fault. However, it does seem buggy that I can successfully alter the format of the field in the element attribute, but not in the element content (even copying and pasting the exact same format/code).

Ah, also please consider voting for @jornaagaard’s Wishlist idea for dynamic custom attribute values at Dynamic custom attributes | Webflow Wishlist and Dmitrii Tregubov’s idea for empty custom attribute values at Custom Attributes Name | Webflow Wishlist.

That is better than creating duplicate Wishlist ideas, even though they are three years old, right?

This is definitely an issue. First, there should be a native element that allows for the auto definition of the datetime property and the innerHTML as well. Short of that the custom embed would work if you had the option to format the value of the date itself. I think you can change this with a text field, but there should be a way to do this in the embed field as well.

I found a way to do this.

You need to copy the Field Shortcode from the Editor to other place and it will looks like the next:

{{wf {&quot;path&quot;:&quot;published&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;MMM DD, YYYY&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }}

The above is an escaped string, if you unescape it:

{{wf {"path":"published","transformers":[{"name":"date","arguments":["MMM DD, YYYY"]\}],"type":"Date"\} }}

I updated the format to ["YYYY-MM-DD"]

{{wf {"path":"published","transformers":[{"name":"date","arguments":["YYYY-MM-DD"]\}],"type":"Date"\} }}

I used the site to unescape the field code Free Online HTML Escape / Unescape Tool -

The next image is the result I got in the json+ld I’m building

Screen Shot 2023-06-08 at 08.17.58

I was searching for a solution like this from a long time. Thanks a lot. Btw! Just can update… I think the variable names for published have changed. Here’s an update code for the same:

{{wf {"path":"published-on","transformers":[{"name":"date","arguments":["YYYY-MM-DD"]\}],"type":"Date"\} }}

And yes, this work inside the <head> and inside the schema variable.

Can someone explain this for me like I’m 3? I was hoping to use the custom code to custom format my date, but not sure how this work?

I also tried to add this to the header just to check, but I don’t see any output.