Generic VF Page Component to be used in VF page to format date as per User’s Locale

Use Case

Generic VF Page Component to be used in VF page to format date  as per User’s Locale.

When we use a date field in a VF page, then it is often required  to format it according to User’s locale date format. We can achieve this using code in VF page as shown below –

<apex:outputText value="{0,date,dd/MM/yyyy}">

    <apex:param value="{!Contact.Birthdate}" />

</apex:outputText>

Where we are formatting a contact’s birthday in ‘dd/MM/yyyy’ format. But if an organization has users across various countries then they will have different locale and this code will not going to work. To achieve this requirement we can create a generic VF Component that will take care of date format according to logged in user’s locale. We can store the user’s local date formats in a Custom setting

Solution

The code below implements the functionality. Please Follow the below steps along with the code:

1.       Create a new  Custom Setting with below details –

Label:  Date_Format_Settings

Object Name: Date_Format_Settings

Setting Type : List

Visibility: Public

2.       Create a Text field (of length 255) with field label and field name “Date_Format”.

3.       With the help of Data Loader, populate this custom setting with data. Please use the attached CSV file to import data to the Custom setting.

4.       Create a new apex class  and a paste the code listed under class name “Date_Format_Controller”.

5.        Create a new VF component with the code listed under ‘Date Format Component’ below. Name it as ‘Date Format’

Reusable Code

Date_Format_Controller Apex class Code:

public class Date_Format_Controller

{   

    public DateTime dateTimeValue { get; set; }

    

    //returns the properly formatted datetime value

    public String getFormattedDateValue()

    {

        String localFormmattedDate = '';     

        String user_locale = UserInfo.getLocale();

        String myDateFormatValue = 'M/d/yyyy';

        Date_Format_Settings__c mySetting = Date_Format_Settings__c.getValues(user_locale);

        if (mySetting != null)

        {

            myDateFormatValue  = mySetting.Date_Format__c.trim();

        }     

        if (dateTimeValue != null)

        {

         localFormmattedDate  = dateTimeValue.format('M/d/yyyy');

         if (myDateFormatValue !=null & !myDateFormatValue.equals(''))

         {

            try

            {

                localFormmattedDate  = dateTimeValue.format(myDateFormatValue);

            }

            catch (Exception e)

            {

             localFormmattedDate  = dateTimeValue.format('M/d/yyyy');

            }

          }

        }    

        return localFormmattedDate  ; //return the string

      

    }   

}

Date_Format Component  Code:

<apex:component access="global" controller="Date_Format_Controller">

<apex:attribute assignTo="{!dateTimeValue}" description="The DateTime value to be rendered based upon the user's locale" name="dateTimeInput" type="DateTime"></apex:attribute>

{!formattedDateValue}

</apex:component>

Code Usage:

This component can be used from any VF page using the below syntax –

  <c:Date_Format dateTimeInput="{!DateTobeFoprmatted}"> </c:Date_Format>

Where ‘DateTobeFoprmatted’ is date passed from its controller that needs to be formatted.

The following VF page  uses the generic component to format a contact’s birthdate.To test this VF page you can simply create a new contact and enter a birthdate along with other required field. Now replace  the contact’s ID in the below URL and check on the browser.

https://c.ap1.visual.force.com/apex/Contact_Date_Format?id=00390000008O6CE

Date_Format_Test VF page Code:

<apex:page standardController="Contact">

Formatted contact's birthdate :

  <c:Date_Format dateTimeInput="{!Contact.Birthdate}"> </c:Date_Format>

</apex:page>

Please  go to the logged in user’s detail page and edit the “Locale” field to select a new locale option for the user. If you reload the above VF page you will see that the Contact’s birthdate is formatted according to the locale that you have selected for the logged in user.