Format Date in Visualforce and Email Template

by

This post will explain, How to Format Date in Visualforce Email Template. The same thing would work to format Date in the Visualforce page as well. So, let’s get into the implementation.

Implementation

First, let’s create a simple Visualforce Email Template and add relatedToType and recipientType. And we will just display the Created Date of relatedToType.

Consider below Email Template Subscription here, where relatedToType and recipientType is Contact. And use relatedToType to display Created Date.

Subscription.email

<messaging:emailTemplate subject="Subscribed to Niks Developer" recipientType="Contact" relatedToType="Contact">
<messaging:htmlEmailBody >

Hi {!recipient.FirstName},
<br/><br/>

You have Subscribed to Niks Developer on {!relatedTo.CreatedDate}.
<br/><br/>

Best Regards, <br/>
Nikhil Palekar

</messaging:htmlEmailBody>
</messaging:emailTemplate>

And this is how the Email Template will look with the default Date format:

Default Date Format in Visualforce Email Template
Default Date Format in Visualforce Email Template

Format Date in Visualforce Email Template

Now, let’s see how we can Format the Date in Visualforce Page and Visualforce Email Template. We need to use <apex;outputText> with <apex:param> to format Date. Check the below syntax.

<apex:outputText value="{0, date, DATE_FORMAT}">
    <apex:param value="{!relatedTo.CreatedDate}" /> 
</apex:outputText>

Here, in the value attribute, the first parameter should be 0, and the second should be a date. And in the third parameter, we need to pass the DATE_FORMAT.

1. Format like February 21, 2021

Pass the DATE_FORMAT as MMMM d’,’ yyyy.

Subscription.email

<messaging:emailTemplate subject="Subscribed to Niks Developer" recipientType="Contact" relatedToType="Contact">
<messaging:htmlEmailBody >

Hi {!recipient.FirstName},
<br/><br/>

You have Subscribed to Niks Developer on 
<apex:outputText value="{0, date, MMMM d','  yyyy}">
    <apex:param value="{!relatedTo.CreatedDate}" /> 
</apex:outputText>.
<br/><br/>

Best Regards, <br/>
Nikhil Palekar

</messaging:htmlEmailBody>
</messaging:emailTemplate>

This is how it will look:

Date Format: February 21, 2021
Date Format: February 21, 2021

2. Format Like 21-02-2021

Pass the DATE_FORMAT as MM-dd-yyyy.

Subscription.email

<messaging:emailTemplate subject="Subscribed to Niks Developer" recipientType="Contact" relatedToType="Contact">
<messaging:htmlEmailBody >

Hi {!recipient.FirstName},
<br/><br/>

You have Subscribed to Niks Developer on 
<apex:outputText value="{0, date, MM-dd-yyyy}">
    <apex:param value="{!relatedTo.CreatedDate}" /> 
</apex:outputText>.
<br/><br/>

Best Regards, <br/>
Nikhil Palekar

</messaging:htmlEmailBody>
</messaging:emailTemplate>

This is how it will look:

Date Format: 21-02-2021
Date Format: 21-02-2021

3. Format Like Sun, Feb 21, 2021

Pass the DATE_FORMAT as MMM d, yyyy.

Subscription.email

<messaging:emailTemplate subject="Subscribed to Niks Developer" recipientType="Contact" relatedToType="Contact">
<messaging:htmlEmailBody >

Hi {!recipient.FirstName},
<br/><br/>

You have Subscribed to Niks Developer on 
<apex:outputText value=" {0,date,EEE, MMM d, yyyy}">
    <apex:param value="{!relatedTo.CreatedDate}" /> 
</apex:outputText>.
<br/><br/>

Best Regards, <br/>
Nikhil Palekar

</messaging:htmlEmailBody>
</messaging:emailTemplate>

And this is how it will look:

Date Format: Sun, Feb 21, 2021
Date Format: Sun, Feb 21, 2021

Also Read:

That is all. This is how we can Format the Date in the Visualforce Page and Visualforce Email Template. If you don’t want to miss new implementations, please Subscribe here.

If you want to know more about the Visualforce Email Template, please check official Salesforce documentation here.

See you in the next implementation.

Leave a Comment