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?

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>
  • Updated answer seems promising, I will try to implement it and get back to you. Thanks :) – Arnold Jr. Sep 13 '17 at 18:39
  • Man, you are the best! I owe you a beer. Let me know when you plan to visit DC. – Arnold Jr. Sep 13 '17 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) – Arnold Jr. Sep 13 '17 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 '17 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 '17 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>
  • I would like to display the timestamp as the mouse-hover text for this apex:column? How can I get that? – Arnold Jr. Sep 13 '17 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.