DateTime format in the TITLE of the <apex:column>

Question

On a Visualforce page, I am displaying CreatedDate field as a title for one of the <apex: column>. This gives me the ability to get the time of record creation when the mouse hovers.

Apex controller:

..
public DateTime CreatedDateHover{get;set;}
..
for(Object__c var: mapdata.Values()){
      ..
      rec.CreatedDateHover = var.CreatedDate;
      ..
}
..

Visualforce page:

<apex:column title="{!a.CreatedDateHover}" headerValue="Entity">
        <apex:outputLink value="/{!a.Id}"> {!a.Field} </apex:outputLink>
</apex:column>

The format I get when I hover my mouse:

Fri Sep 08 16:29:22 GMT 2017

How can I change this format to something like:

Fri Sep 08 2017, 04:29:22 Pm

How can I have the time format to 12 hour clock with AM/PM changes based on it? Is there a way to get the timezone based on the Org's timezone?

Answer 1

Use apex:outputext and adjust the format as needed:

Visualforce Date formatting

Dateformat reference: http://docs.oracle.com/javase/1.5.0/docs/api/java/text/SimpleDateFormat.html

<apex:outputLink value="/{!account.Id}"> 
    <apex:outputText value="{0,date,EE MM dd yyyy, hh:mm:ss aaa}">
        <apex:param value="{!account.createddate}" /> 
    </apex:outputText>
</apex:outputLink>

Update: Another Simple idea you can try is to use a tooltip : https://www.w3schools.com/css/css_tooltip.asp I literally copy pasted the style from the tooltip CSS and adjusted the VF page as below:

 <apex:column >
                 <div class="tooltip">
                   <apex:outputLink value="/{!account.Id}"> {!account.createddate} </apex:outputLink>
                    <span class="tooltiptext">
                        <apex:outputText value="{0,date,EE MM dd yyyy, hh:mm:ss aaa}" styleClass="tooltip">
                            <apex:param value="{!account.createddate}" /> 
                        </apex:outputText>
                    </span>
                </div>
        </apex:column> 

Output:

Full VF page with style class included incase you want to modify it:

<apex:page standardController="account">
<style>
.tooltip {
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 190px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 2;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
   <apex:pageblock >
    <apex:pageBlockTable value="{!Account}" var="account">
        <apex:column >
                 <div class="tooltip">
                   <apex:outputLink value="/{!account.Id}"> {!account.createddate} </apex:outputLink>
                    <span class="tooltiptext">
                        <apex:outputText value="{0,date,EE MM DD YYYY, hh:mm:ss aaa}" styleClass="tooltip">
                            <apex:param value="{!account.createddate}" /> 
                        </apex:outputText>
                    </span>
                </div>
        </apex:column>  
    </apex:pageBlockTable>



    </apex:pageblock>
</apex:page>

Answer 2

You can use a header facet.

<apex:column>
    <apex:facet name="header">
        <!-- fancy stuff here (like formatted outputText tag) -->
    </apex:facet>
</apex:column>