Format Dates in Your SharePoint Item Style

Even with knowing how to do this, I constantly found myself searching the internet for the right format for the register tag and the syntax for the item style date itself to render the dates I needed in the correct way. So I decided to write about it mainly so that I had everything I needed in one place but also to hopefully help anyone else looking for this code.

Depending on your design, date roll-ups might look like this, ‘January 11, 1976′ or like this, ’01/11/76’ or like this, ‘1.11.1976’. The point is there are a lot of ways to format dates and it varies from design to design.

In a SharePoint Content Query Web Part you can control the output of the items being rolled up by creating Item Styles. They allow you to manipulate the content and customize the HTML output of the items and the fields you want to render. There is an XSL document that houses these Item Styles so that you can add your own custom ones. You can find this file by opening your site in SharePoint Designer and navigating to /Style Library/XSL Style Sheets/ItemStyle.xsl.

Within an item style, this is how you would render a date field with no formatting.

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

and by default SharePoint renders that value like this.

2015-09-02 11:38:49

So as you can see in almost all cases you would want to reformat this date into something more aesthetically pleasing.

When you open that itemstyle.xsl file to edit, the opening xsl:stylesheet tag will look something like 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">

Within this tag you will want to add the following…

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

so that the end result looks like 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:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">

Now you can format your date fields using the ddwrt:FormatDateTime function like so

<xsl:value-of select="ddwrt:FormatDateTime(string(@Created), 1033, 'dddd MMMM d, yyyy')"/>

this sample would render the date like this

Wednesday September 2, 2015

Here’s a good resource to see a list of all the options you can use for your specific formatting needs.

https://msdn.microsoft.com/en-us/library/8kb3ddd4%28v=vs.110%29.aspx#MMM_Specifier

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

3 − 1 =