How can I Display Superscript on Date Format using VisualforcePage

I have faced this problem and struck how can I display superscript based on the date field. Finally, I got a good solution, I want to share with you.
The below example written on visualforce page code, whenever you changed date field in an object record, it will affect on the result. For example, if you changed the day as 21/07/2017 on date field, then result showing as ‘21st July 2017‘ on visualforce page. Result was showing superscript date format based on the days you entered on date field in an object record.

Note –

Object Api Name – Inspection_Sheet__c
Field Api Name – Date__c

Visualforce Code –

<apex:page standardController=’Inspection_Sheet__c’>

<!– 1st , 21st , 31st–>

<apex:outputpanel rendered=”{!IF(Day(Inspection_Sheet__c.Date__c ) = 1 || Day(Inspection_Sheet__c.Date__c ) = 21 ||
Day(Inspection_Sheet__c.Date__c ) = 31 , TRUE, FALSE) }” >
<apex:outputText value=”{0,date,dd}<sup>st</sup> {0,date,MMMM} {0,date,YYYY} ”  escape=”false” >
<apex:param value=”{!Inspection_Sheet__c.Date__c}” />
</apex:outputText>
</apex:outputpanel>

<!–2nd , 22nd –>

<apex:outputpanel rendered=”{!IF(Day(Inspection_Sheet__c.Date__c ) = 2 || Day(Inspection_Sheet__c.Date__c ) = 22  , TRUE, FALSE) }” >
<apex:outputText value=”{0,date,dd}<sup>nd</sup> {0,date,MMMM} {0,date,YYYY} ”  escape=”false” >
<apex:param value=”{!Inspection_Sheet__c.Date__c}” />
</apex:outputText>
</apex:outputpanel>

<!– 3rd , 23rd –>

<apex:outputpanel rendered=”{!IF(Day(Inspection_Sheet__c.Date__c ) = 3 || Day(Inspection_Sheet__c.Date__c ) = 23  , TRUE, FALSE) }” >
<apex:outputText value=”{0,date,dd}<sup>rd</sup> {0,date,MMMM} {0,date,YYYY} ”  escape=”false” >
<apex:param value=”{!Inspection_Sheet__c.Date__c}” />
</apex:outputText>
</apex:outputpanel>

<!– 4th , 5th to 20th , 24th to 30th –>

<apex:outputpanel rendered=”{!IF(Day(Inspection_Sheet__c.Date__c ) != 1 && Day(Inspection_Sheet__c.Date__c ) != 21 && Day(Inspection_Sheet__c.Date__c ) != 21 && Day(Inspection_Sheet__c.Date__c ) != 31 && Day(Inspection_Sheet__c.Date__c ) != 2 && Day(Inspection_Sheet__c.Date__c ) != 22 && Day(Inspection_Sheet__c.Date__c ) != 3 && Day(Inspection_Sheet__c.Date__c ) != 23, TRUE, FALSE) }” >
<apex:outputText value=”{0,date,dd}<sup>th</sup> {0,date,MMMM} {0,date,YYYY} ”  escape=”false” >
<apex:param value=”{!Inspection_Sheet__c.Date__c}” />
</apex:outputText>
</apex:outputpanel>
</apex:page>

We are the ISV Partners and Please reach us for custom development => www.merfantz.com

—————————— We Are Happy To Helping You!!!!!!!!!!!!!!!!!! ———————————–

 

Author Bio

Merfantz Editor
+ Recent Posts
Tags:

Leave a Reply