Custom Date Formats in SharePoint XSL


There are quite a few posts out there on this topic, but I’m yet to find one comprehensive post that walks through this beginning to end and actually works.  Let’s give it a go.

A very common scenario for SharePoint publishing sites is to customize the look to suit the customers needs.  Usually this is done with a Content Query Web Part and some custom XSL.  When doing this very often you need to display a date.  You will quickly notice that just displaying the date that SharePoint gives you is not going to be sufficient.  If you just did the standard

<xsl:value-of select="@ArticleStartDate"/>

You get back a pretty nasty looking result

2009-03-23 00:00:00

 

However if you use the “FormatDate” function, you can make this look a lot better.

<xsl:value-of select="ddwrt:FormatDate(@ArticleStartDate, 2057, 3)"/>

Results in this

23 March 2009

All you need to do to make sure the “FormatDate” function is available in your custom XSL files is to make sure you reference the ddwrt namespace.

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime

Once this has been added to the rest of your namespace declarations at the top of your <xsl:stylesheet> tag, you should be able to use the “FormatDate” function anywhere you like.  Here is sample of what a full XSL file would look like that does this.

<xsl:stylesheet 
  version="1.0" 
  exclude-result-prefixes="x d xsl msxsl cmswrt"
  xmlns:x="http://www.w3.org/2001/XMLSchema" 
  xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
  xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
    
    <xsl:template name="Default" match="*" mode="itemstyle">
	<xsl:value-of select="ddwrt:FormatDate(@ArticleStartDate, 2057, 3)"/>			
    </xsl:template>
   
</xsl:stylesheet>

Here are the details on the different formats you can get by changing the parameters.  March 23 12:00 AM was used as input for all outputs.

Output Locale Format
3/23/2009 1033 1
3/23/2009 12:00 AM 1033 2
Monday, March 23 2009 1033 3
12:00 AM 1033 4
Monday, March 23, 2009 12:00 AM 1033 7
3/23/2009 12:00:00 AM 1033 13
Monday, March 23, 2009 12:00:00 AM 1033 15
23/03/2009 2057 1
3/23/2009 12:00 AM 2057 2
23 March 2009 2057 3
00:00 2057 4
23/03/2009 00:00 2057 5
23 March 2009 00:00 2057 7
00:00:00 2057 12
23/03/2009 00:00:00 2057 13
23 March 2009 00:00:00 2057 15

You can also get a list of all the available locale’s here.


Comments (23)

  1. Werty says:

    Hi,

    how can I add a lookup field?

    Thanks a Lot

  2. Steve Ottenad says:

    Thanks for the super-useful reference! I used a snippet of this in a write up on how to style up a Content Query Web part with some styling. A useful writeup showing an implementation of the code above <a href="labs.steveottenad.com/…/">Sharepoint 2010 XSLT Date Formatting in a CQWP</a>. Thanks again!

  3. Michael Rudder says:

    I believe it should be as follows:

    <xsl:value-of select="ddwrt:FormatDate(string(@ArticleStartDate, 2057, 3)" />

    The addition is "string"

  4. Avinash says:

    Superb Article. Please keep posting such articles it will help a lot of developers !

  5. Pawan says:

    Thanks for this article. Also thanks for Michael Rudder. The addition of "string" worked for me, otherwise it gives error.

  6. priya says:

    Hi plese can u say the format for Monday 27th Febraury 2012 ?

  7. Satasana says:

    thnx a lot ! One question,I have to find the difference between my  date and  the current date, how can i do that?

  8. Very useful! Two comments:

    1. In SharePoint Designer the ddwrt namespace is already added (at least it is in my custom display form)

    2. The correct syntax does use string, but needs an extra ")"

    e.g. <xsl:value-of select="ddwrt:FormatDate(string(@EventDate), 1033, 7) "/>

  9. nnn says:

    hi , just i hope to understand xslt without i study anything how i can do that ?

  10. Brittany says:

    Loved this! Thank you very much.

    Now write one on how to parse recurring event data into a nice format too! 🙂

  11. Nik says:

    this is still a lifesaver ( 4 years after original post !) …many many thanks ! It worked for me without the string bit that people have mentioned in the comments…

  12. Gireesh says:

    Hi, First of all thanks for this beautiful post,

    My requirement is to display From calendar to CQWP in 12:00PM format I m struggle from last 2 days but not able to do it.

    Do you have any idea to display time in 12:00 PM format as you have shown code for 12:00 AM

    Thanks

  13. Jeff says:

    I'm finding I'm having to do something like this in order to display the data in a US format but also offset the time. My question is, will I need to change this to a different locale code when the US goes back into Daylight Savings Time. Will I need to have to adjust my code twice a year?

    <xsl:value-of select="ddwrt:FormatDate(string(@ArticleStartDate) ,1033 ,1)"/><xsl:text> </xsl:text><xsl:value-of disable-output-escaping="no" select="ddwrt:FormatDateTime(string(@ArticleStartDate), 2057, 'HH:mm tt')" />

  14. Gireesh says:

    Thanks Jeff

    How can I use this date filed as a variable. When I try to form it as below , It does not reflect any change

    <xsl:variable name="endtime"  select="ddwrt:FormatDate(string(@enddatetime) ,1033 ,1) />

    <xsl:value-of disable-output-escaping="no" select="ddwrt:FormatDateTime(string(@endtime), 2057, 'HH:mm tt')" />

    <span class="time">Time: <xsl:value-of select="$endtime" /></span>

    Do you have any idea to format it in form of Time.

    Thanks a lot.

  15. Kevin says:

    Is there a format for adding full, e.g. 01/20/2014?

  16. Anurag says:

    @Kevin This will work

    <xsl:value-of select="ddwrt:FormatDate(string(@YourDateColumn),1033,1)"/>

  17. Date is Empty or Null says:

    <xsl:value-of select="ddwrt:FormatDate(string(@FollowupDate),1033,1)"/> is returning 1/29/1900 is date is null or empty.

    How to test if date is empty or null?

    Appreciate your help.

    Thanks & Regards,

    Khushi

  18. Jay says:

    Thanks for this. I was able to get the formatting I wanted but the time was off as it was using/showing UTC time. I ended up using "1033, 5" to adjust to local time. Oddly that combo wasn't listed above which threw me for a bit.

  19. Mauricio says:

    Great article for date format values.

  20. sudheer says:

    Nice Article,

    You can find user friendly date time format programmatically       sharepointsolutions-sudheer.blogspot.com/2014/12/user-friendly-time-in-sharepoint.html

  21. http://blogs.msdn.com/b/joshuag/archive/2009/03/25/custom-date-formats-in-sharepoint-xsl.aspx says:

    blogs.msdn.com/…/custom-date-formats-in-sharepoint-xsl.aspx

  22. Kaushal Khamar says:

    <xsl:value-of select="ddwrt:FormatDateTime(string(ddwrt:Today()) ,1033,'dd-MM')" /> return Server time and date in PST time zone in Office 365. How to get local time in CQWP in GMT time zone?