Formatting a Date in Your SharePoint 2013 Display Template

Date formatting in SharePoint is a subject discussed over and over in all communities, forums, blogs, etc. Whether it is some discrepency in daylight savings time output, region settings or just simply to render the date in a format that fits your design implementation guidelines.

I’ll be discussing the latter – using SharePoint 2013’s content by search web part and display templates.

In the following sample, we have an article displayed with 3 very common components – Date, Title and Description. As you can see, the date has a specific format that needs to be followed.

sonny article-sample

During the process of creating the article the date will be selected by the content author using a date field like so.

sonny date-field

SharePoint by default takes the value and formats the date. So in search results it renders like this…

Wednesday, November 5, 2014

To control the output for the date that you want, you will have to add a couple of variables to your display template. The first variable (which I’m calling parseDate) takes the inputValue, that is stored in the database as a text string object, and parses the value of the field back to a datetime object. The second variable does the actual formatting.

In your display template you will see sections of javascript code enclosed in tags like these – you will see where all the initial variables are set…this is where you will be adding the variables.

<!–#_

sonny set-vars

_#–>

And here’s the code for copying.

var parseDate = new Date(line3.inputValue);

var line3Date = parseDate.format(‘MM/dd/yyyy’);

Finally – anywhere you want to render the newly formatted date you will add this snippet.

_#= line3Date =#_

Refer to http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.95).aspx for more information on the specific date formatting rules that you can use.

You may also like...

Leave a Reply

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

4 × four =