Tuesday, April 4, 2017

Format Date in SharePoint Calender Custom Display Form

I wanted to change the date format "2017-04-04T09:00:00Z" to "04/04/2017 , 09:00 AM" in SharePoint calendar custom display form.I followed below steps.

1. Open the site in SharePoint designer and click on the "Lists and Libraries".

2. Select the Calendar List which you need to format the date.

3.Under the form section, click on the "New" to create new Display form.

4.Then create a new Display form.




















5. In created display form , find below code snippet.
          <tr>  
             <td width="190px" valign="top" class="ms-formlabel">  
               <H3 class="ms-standardheader">  
                 <nobr>Start Time</nobr>  
               </H3>  
             </td>  
             <td width="400px" valign="top" class="ms-formbody">  
               <xsl:value-of select="@EventDate"/>  
             </td>  
           </tr>  
           <tr>  
             <td width="190px" valign="top" class="ms-formlabel">  
               <H3 class="ms-standardheader">  
                 <nobr>End Time</nobr>  
               </H3>  
             </td>  
             <td width="400px" valign="top" class="ms-formbody">  
               <xsl:value-of select="@EndDate"/>  
             </td>  
           </tr>  
6. Replace it with below code.
             <td width="190px" valign="top" class="ms-formlabel">  
               <H3 class="ms-standardheader">  
                 <nobr>Start Time</nobr>  
               </H3>  
             </td>  
             <td width="400px" valign="top" class="ms-formbody">          
               <xsl:value-of select="msxsl:format-date(@EventDate, 'dd/MM/yyyy')"/> ,  
               <xsl:value-of select="msxsl:format-time(@EventDate, 'hh:mm tt')"/>  
             </td>  
           </tr>  
           <tr>  
             <td width="190px" valign="top" class="ms-formlabel">  
               <H3 class="ms-standardheader">  
                 <nobr>End Time</nobr>  
               </H3>  
             </td>  
             <td width="400px" valign="top" class="ms-formbody">  
               <xsl:value-of select="msxsl:format-date(@EndDate, 'dd/MM/yyyy')"/> ,  
               <xsl:value-of select="msxsl:format-time(@EndDate, 'hh:mm tt')"/>  
             </td>  
           </tr>  
7.You can use any date  and time format for the  'dd/MM/yyyy' ,'hh:mm tt'