Dynamic embed for a date field - how to format to include time

So I know we can embed any CMS field via a dynamic embed. What about a CMS date field where time is important?

I’m creating a dynamic “add to calendar” button for an events collection where a starting and ending time, not just date, is associated with the event. I am using the add to calendar js found here: https://github.com/nwcell/ics.js?files=1. Works great, just can’t extract in the dynamic embed the start and end times - I can get the actual date just fine.

When referencing a CMS date field in the designer, not in a a dynamic embed, we can set the date format. How do we do this for a dynamic embed?

2 Likes

This is currently not possible…

Any update here? This would be helpful

@Alex_Avery- You could write the formatted date value to a text field that is hidden then grab it via Javascript and do what you need in an embed.

Good call! I may have even found a slightly simpler solution:

I copy/pasted the custom HTML with the CMS field into Notepad and then edited the format directly in the text. Here it is with the HH:MM added:

<span class="start">{{wf {&quot;path&quot;:&quot;start-date&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;MMM DD, YYYY HH:MM&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }}</span>

3 Likes

Thank you very much Alex! We have a page with events, some events starting on the same date at different times. How can we use your solution in our case?

You can add the time to your existing date field, or add a separate time field. If you post more details, I’d be happy to help clarify further.

Have you experienced any issues with the minutes being randomly off? My times are all on the hour but are returned as 13:04, 15:08, etc.

Hey guys, I was seeing the same thing as Zeke8990 – the MM portion of the time is coming back with 04 instead of 00. Then I did some more digging and realized that “MM” is for the month, and “mm” (lowercase m’s) for the minutes.

However, now the time is coming through as 12-Hour time rather than 24-hour, so “A” must be added to the end of the time format - so it looks like this:
HH:mm A

Hope that helps!

Interesting, I will have to look into your “A” suggestion. I ended up having success with replacing the first "date" (not the second instance with a capital D) with datetime.

You need to unescape the wf shortcode to make it more readable.

Using this tool Free Online HTML Escape / Unescape Tool - FreeFormatter.com

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