Whenever we are working with datetime on visualforce page, we may face some issue either with its formatting or its value not coming correctly. So basically the formatting of date depends on the locale of the user, and second thing which is its value depends on the timezone.
In the salesforce database each datetime value is stored in GMT, and when this is shown on the detail page it is adjusted with the current user’s timezone or offset. But sometime we developer create custom visualforce pages to fulfil different different business requirements. Here I come up with the all possible use cases and solution of showing Datetime on visualforce page with their pros and cons.
Datetime on Visualforce Page
- Datetime Format (Showing DD/MM/YYYY, showing time only, showing year only, showing week day etc).
- Datetime Value (Either in GMT or in current user timezone).
| Method/Approach Taken | Is Format Customizable ? | Is Current Timezone ? |
|---|---|---|
| apex:outputText – direct datetime value. | NO | NO |
| apex:outputText – formatted using apex:param. | YES | NO |
| apex:outputText – with one space in value(Trick). | NO | YES |
| apex:outputText – (Offset is added on page). | YES(But in controller) | YES |
| apex:outputText – Showing a String containing formatted Datetime from controller. | YES | YES |
| apex:outputText – (Offset is added from controller). | YES | YES |
| apex:outputField – (No Customization can be done with format). | NO | YES |
Source Code
Visualforce page Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<apex:page controller="TestTimeZoneController" tabStyle="contact"> <apex:pageBlock title="Datetime on Visualforce Page"> <h2> Actual Time - 2/19/2017 10:27 AM - Eastern Standard Time(America/New_York)</h2> <br/><br/> <!-- Normally Developer avoid this - if they don't want time in GMT --> <apex:pageBlockSection title="apex:outputText - Values are shown in GMT " columns="2" collapsible="false"> <!-- Without any format i.e. Default --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputText - having datetime value without any formatting</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputText value="{!con.LastModifiedDate}"/> </apex:pageBlockSectionItem> <!-- With Custom Formatting --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputText - locally formatted using apex:param</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputText value="{0,date,EEE MMM dd yyyy h:mm a}"> <apex:param value="{!con.LastModifiedDate}"/> </apex:outputText> </apex:pageBlockSectionItem> </apex:pageBlockSection> <!-- To Show Time in user's timezone instead of GMT go with this --> <apex:pageBlockSection title="apex:outputText - Values are in current user Timezone" columns="2" collapsible="false"> <!-- With a trick of adding one space before datetime in value --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputText - with one space in value(Trick)</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputText value=" {!con.LastModifiedDate}"/> <!-- See the space after Value--> </apex:pageBlockSectionItem> <!-- with Adding offset on page --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputText - (Offset is added on page)</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputText value="{0,date,M/d/yyy h:mm a}"> <apex:param value="{!con.LastModifiedDate+(currentOffsetDiff/24)}"/> </apex:outputText> </apex:pageBlockSectionItem> <!-- Showing a String having Datetime value fomatted in the controller --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputText - Showing a String containing formatted Datetime from controller.</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputText value="{!dateTimeVal}"/> </apex:pageBlockSectionItem> <!-- Showing Locally Formatted Value by adding offset from controller --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputText - (Offset is added from controller).</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputText value="{0,date,EEE MMM dd yyyy h:mm a}"> <apex:param value="{!dateTimeVar}"/> </apex:outputText> </apex:pageBlockSectionItem> </apex:pageBlockSection> <!-- Apex Output Field --> <apex:pageBlockSection title="apex:outputField - Values are in current user Timezone" columns="2" collapsible="false"> <!-- Direct Apex:outputField in current user timezone and local format --> <apex:pageBlockSectionItem> <apex:outputLabel>apex:outputField - (No Customization can be done with format)</apex:outputLabel> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem> <apex:outputField value="{!con.LastModifiedDate}"/> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock> </apex:page> |
Apex controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public class TestTimeZoneController{ public contact con {get;set;} public Decimal currentOffsetDiff {get;set;} // current user's offset public String dateTimeVal {get;set;} // will be used to show datetime in local format public Datetime dateTimeVar {get;set;} // will be used to show as per custom format public TestTimeZoneController(){ con = [SELECT LastModifiedDate,createdDate FROM contact WHERE email = 'nisarjavac799@gmail.com' LIMIT 1]; // This is for demo only currentOffsetDiff = (userInfo.getTimezone().getOffset(con.LastModifiedDate)/(1000*60)); dateTimeVal = con.LastModifiedDate.format(); // format can be customized, eg. format('DD/MM/YYYY hh:mm a') dateTimeVar = con.LastModifiedDate.addMinutes((integer)currentOffsetDiff); } } |
Conclusion
For Different format see Datetime format Patterns.
So I have shared my finding on the datetime on visualforce page, I hope that this will help developers. Please comment if you need further explanation or have any feedback.