Displaying date in Visualforce page

I was recently trying to display date in Visualforce page and ran into some problems. I would like to share with you what I’ve found and maybe this information will turn out to be helpful.

I was recently messing around with date fields and came across some problems. I tried to use date field in PageBlockTable <apex:column> using apex:outputtext inside it, but the time it displayed was 00:00:00.

I tried a few things, and as it turned out, if you want to display your date, or other values in a custom way you need to use <apex:outputText> and <apex:param> tags. In apex:outputText value attribute you have to write text that you want to show on the end page. You should also keep in mind that you cannot do it between tags because in the end, used HTML code, will have out of span tag just like in the following example:

<apex:outputText style="font-style:italic" value="1 2 3 {0} 5 6 7 8">
<apex:param value="4"/>
</apex:outputText>

Results: 1 2 3 4 5 6 7 8

In this particular example it is not wise to use this method just because it doesn’t really make much sense. But when it comes to representing date in a custom format it is a different story. Take a look at the next example in which I’ve used combination of <apex:outputText> and <apex:param> to display full date, from years, down to seconds.

<apex:outputText value="The time right now is:
{0,date,yyyy.MM.dd G 'at' HH:mm:ss z}">
<apex:param value="{! NOW() }" />
</apex:outputText>

Results: The time right now is: 2018.03.27 AD at 23:49:02 GMT

At this point you may ask “Why is there a “0” before the date?”  Reason for this is pretty simple. “0” is a number of param. As we are starting counting apex:params from 0 it is first param, next one will be 1 and so on. Take a look at this example to visualize this:

<apex:outputText style="font-style:italic" value="{0} {1} {2} {3}">
<apex:param value="A"/>
<apex:param value="B"/>
<apex:param value="C"/
<apex:param value="D"/>
</apex:outputText>

Results: A B C D

As you’ve probably already noticed by this point, “date” param tells us that output text will be displaying date field and  “yyyy.MM.dd G ‘at’ HH:mm:ss z” informs us how will data field be displayed. Of course if you need, you can alter this line of code and insert only “HH:mm:ss” to get just the time or do the opposite. It doesn’t really matter so choose the approach that best suits your needs.

You can also use this combination in other situations as well. Good example of such usage is displaying values of money or other numbers with a lot of digits. In the next example I’m going to show you how I’ve used <apex:outputText> and <apex:param> tags to display large number with commas making it more easily readable:

<apex:outputText value="{0, number, 000,000.00}">
      <apex:param value="{!Account.AnnualRevenue}" />
</apex:outputText>

Results : 500,000,000.00

By doing this, after every 3 digits, comma will be added, and decimal numbers will be displayed after point. The whole number will also be rounded to two places after the decimal point.

As you can clearly see, combination of <apex:outputText> and <apex:param> has more than one use, and is a neat and easy tool when it comes to displaying dates, time and large numbers in Visualforce page. I hope these tips will turn out to be useful in your personal work!  

Comments (0)

Thanks! Your comment is awaiting moderation.

Testimonials

They have a very good company culture of their own, which gives them a real edge compared to other providers.

CEO

Leading UK system integrator

They're very skilled technically and are also able to see the bigger picture.

Managing Partner

Scalable SaaS for healthcare IoT built on Salesforce platform

They've been consistently able to deliver work on time and within budget.

CTO

High performance SaaS for financial insitutions

We are seriously impressed by the quality and broader picture of anything they do for us.

CEO

Gold trading platform

Speak with an Expert

How can we help? If you would like a member of the Stratoflow team to get in touch, please send us your message and we will contact you shortly.

Contact