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.00By 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!
