function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rick MacGuiganRick MacGuigan 

How to format date in VisualForce page with html table

How can I format a date field from a query do that it does not cause a break as a new table row? Below is a table and the respective code.

User-added image
 
<apex:actionRegion >
<apex:outputPanel layout="block" styleClass="header1" >
<apex:pageBlockSection columns="1" id="section2aa" title="Submission Summary Information" showHeader="true" >
<html>
<body>   
<br></br>
<table> 
<tr class="alldatatables">
<th> Contracts </th>
<th> Key Contact </th>
<th> Effective Date </th>
<th> N/R </th>
<th> Type </th>
<th> Coverage </th>
<th> Subject Prem </th>
<th> QS Part of % </th>
<th> Cession Limit </th>
<th> Treaty Limit </th>
<th> Event Limit </th>
<th> Att Type </th>
<th> LAE Type </th>
<th> ECO% </th>
<th> XPL% </th>
<th> Req Brok% </th>
<th> Req Reinstatements </th>

</tr>
<apex:repeat value="{!submissionList}" var="s" >
<tr class="alldatatables"> 
<td>{!s.SPD_REF_PS__c}</td> 
<td>{!s.Key_Broker_Contact_LU_PS__c}</td>
<td>
<apex:outputText value="{0,date,MM/dd/yy}"> <apex:param value="{!s.Est_CERT_Incept_Date_PS__c}"></apex:param> </apex:outputText>
</td>
<td>{!s.Submission_New_Renew_PS__c}</td> 
<td>{!s.Submission_Type_PS__c}</td>
<td>{!s.Coverage_PS__c}</td>
<td>{!s.Subject_Premium__c}</td>
<td>{!s.QUOTA_SHARE_PART_OF__c}</td>
<td>{!s.PRO_RATA_LIMIT__c}</td>
<td>{!s.Limit__c}</td>
<td>{!s.Event_Limit__c}</td>
<td>{!s.Attachment_Type__c}</td>
<td>{!s.RSO_LAE_TYPE__c}</td>
<td>{!s.RSO_ECO_PCNT__c}</td>
<td>{!s.RSO_XPL_PCNT__c}</td>
<td>{!s.BROKERAGE_PCT__c}</td>
<td>{!"--"}</td>
</tr> 
</apex:repeat>
</table> 
</body>
</html>

</apex:pageBlockSection>
</apex:outputPanel>
</apex:actionRegion>

 
NagendraNagendra (Salesforce Developers) 
Hi Rick,

May I suggest you please give a try by adding layout=" none" to your <apex:outputText> tag which might probably do the trick for you.

Please let us know if this helps.

Thanks,
Nagendra
Rick MacGuiganRick MacGuigan
Thanks for responding Nagendra, tried this before but layout="none" is an unsupported attribute for outputText ?  

Error: Unsupported attribute layout in <apex:outputText>
<td>
<apex:outputText layout="none"  value="{0,date,MM/dd/yy}">
<apex:param value="{!s.Est_CERT_Incept_Date_PS__c}" />
</apex:outputText>
</td>

 
Alain CabonAlain Cabon
Hi,

There is a bug with <apex:repeat> + <td><apex:outputText>

<apex:outputText> generates a <span> (normal) between <tr> (not wanted)

There is an equivalent to <apex:repeat> that I prefer which is <apex:datatable> + <apex:column>
 
<apex:datatable value="{!submissionList}" var="s" styleclass="alldatatables" >  
      <apex:column headerValue="Contracts" value="{!s.SPD_REF_PS__c}"></apex:column>
      <apex:column headerValue="Effective Date">            
           <apex:outputText layout="none"  value="{0,date,MM/dd/yy}"> <apex:param value="{!s.Est_CERT_Incept_Date_PS__c}" />        </apex:outputText>
      </apex:column>
</apex:datatable>

<tr class="alldatatables">  must be tested at the table level

I know only  layout="none" for all the components generating <span> (documentation) but that is not allowed for <apex:outputText>.

Finally, the only simple alternative without difficult jQuery code is <apex:datatable> + <apex:column>

Alain
Rick MacGuiganRick MacGuigan
Thanks for your response Alain. Ironically, I needed to abandone the use of dataTable because I'm running into viewState limitations (size) so I'm replacing several tables with corresponding queries with as much html tags as possible. This is reducing the view state by 25%. So I'm stuck on the <td> issue and <apex: outputText> throwing in an uneeded row. 

Also how are you getting <apex:outputText layout="none"... to save without getting the same error as I ? 
Alain CabonAlain Cabon
Date format in a table in visualforce (known issue)
https://success.salesforce.com/answers?id=9063A000000DUDBQA4

Excepted waiting for a fix of this bug, you need a heavy solution with a wrapper for adding the new field formatted in apex.

Also how are you getting <apex:outputText layout="none"... to save without getting the same error as I ? 
=> nope IMPOSSIBLE for v41. I have the same error.
Alain CabonAlain Cabon
Not sure, it is a bug or wanted by Salesforce.

 <td><apex:outputLabel>{!acc.createddate}</apex:outputLabel></td>  : generates also a not wanted <tr>.

So all the <apex> tags should be used with <apex:column>
Rick MacGuiganRick MacGuigan
Alain, sounds like this is a problem for you as well as others. I think the best idea here is to get rid of the pageBlockSection. Doing allows for proper date format and row/column alignment. 

https://salesforce.stackexchange.com/questions/40361/apexoutputtext-automatically-creates-a-table-td-element-how-to-prevent-it

Here's the table without the pageBlockSection. I just need to figure out how I can create a simialr collapsable section for this table. 
User-added image
Alain CabonAlain Cabon
Ok Thanks for the explanation. I am also on this forum to know all these strange behaviors (and sometimes having or just knowing a solution).

Your question is interesting because the case is very simple and the result is really wrong (how a simple span can become a new line?)

As you want the minimal size for your page for the viewstate only, you can use jQuery, bootstrap, datatable and so on however.

A collapsable section should not be an insurmountable obstacle in pure HTML5 CSS3 ... if that works into a VFP;
https://stackoverflow.com/questions/15095933/pure-css-collapse-expand-div

The main problem is to have the same appearance like the other sections.