2

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?

2 Answers 2

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: enter image description here

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>
7
  • Updated answer seems promising, I will try to implement it and get back to you. Thanks :)
    – SatyaV
    Sep 13, 2017 at 18:39
  • Man, you are the best! I owe you a beer. Let me know when you plan to visit DC.
    – SatyaV
    Sep 13, 2017 at 18:48
  • I see the time is not formatted well. Do you know why? I am getting this: Fri 09 251 2017, 11:29:52 AM which doesn't make sense to me. This is the actual creation date: 9/8/2017 7:29 AM (local time, EST)
    – SatyaV
    Sep 13, 2017 at 18:50
  • what is the value of the outputtext you are using? I am getting it as expected using {0,date,EE MM DD YYYY, hh:mm:ss aaa}
    – Rao
    Sep 13, 2017 at 18:55
  • 1
    my bad JS is case sensitive, it should be {0,date,EE MM dd yyyy, hh:mm:ss aaa} I had DD, YYYY in the original post
    – Rao
    Sep 13, 2017 at 18:58
-1

You can use a header facet.

<apex:column>
    <apex:facet name="header">
        <!-- fancy stuff here (like formatted outputText tag) -->
    </apex:facet>
</apex:column>
1
  • I would like to display the timestamp as the mouse-hover text for this apex:column? How can I get that?
    – SatyaV
    Sep 13, 2017 at 17:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .