How to Format a Widget Builder Date Field

The Velocity Date Tool can be used to format Widget Builder date fields at publish time.

Widget Builder sets the date field values to a specific date format (yyyy-M-d H:m:s.S). In order to format the date variable with the Date Tool, you need convert it from a String variable into an actual Date variable.

This example Display Template assumes that a date field has been added to a Widget Builder widget with the name exampleDate.

Example Date: $exampleDate
#set( $myDate = $"yyyy-M-d H:m:s.S",$exampleDate) )##

My Date Before Formatting: $myDate

<div class="example">My Date After formatting:  
$"EEEE, MMMM d, yyyy",$myDate)

Date formats can be customized using the rules for Simple Date Formats in the Java documentation.

There is an online Simple Date Format tester which can be handy.

1 Like