March 28, 2013

SharePoint 2013: Overriding date value renderer in Display Template

Task

By default, SharePoint 2013 Content by Search Web Part (CSWP) displays dates in long date format, such as March 13, 2013 or 7. maaliskuuta 2013 (in Finnish). How to change that to short date format?

image

Short Solution

Create a new date:
var dueDate = new Date($getItemValue(ctx, "Due Date"));

Then use format to output it in format you want, such as

_#=dueDate.format("d.MM.yyyy")=#_

or
_#=dueDate.toLocaleDateString()=#_

Long Solution

You need to create custom Display Template, and also custom Value Renderer.
  1. Start off by making a copy of your favorite OOB Display Template
  2. Modify the display template .html file and add custom value renderer, call it myDateRenderer. Hint! You can copy default renderers from /_layouts/15/search.clientcontrols.js
  3. Modify date pattern you want to use.
  4. Finally override the actual CSWP display template line with myDateRenderer.

    image


Technorati Tags:

3 comments:

  1. Thanks, this worked for me! I wish I was able to copypaste your code here ;)

    ReplyDelete
    Replies
    1. I'm sorry, don't know why I made it a picture for this post. Will definitely keep adding code as text in the future!

      Delete
  2. Nice tips presented in this post as it proves useful in today competitive world to select the best company.

    ReplyDelete