0

I am working on building a content search web part inside sharepoint 2013. and inside the content search web part i added the built-in "Created" managed property name, as follow:-

enter image description here

now the result for the Created managed property is that it will show the created date as follow inside the content search web part:-

enter image description here

but i am trying to find a better way to present this value, similar to what is provided inside the list view for the created field, which show a more comprehensive date such as ; few second ago, 1 hour ago , yesterday , etc.. as follow:-

enter image description here

so can anyone advice if there is a managed property that can show this type of date format ? or can i manually modify my display template to show a more comprehensive/user-friendly date format?

Thanks

Improve this question
2
  • 1
    I always use the moment.js library to modify my dates. Maybe you can check if that's an option for you.
    – Patrick
    Commented Oct 14, 2016 at 6:10
  • @Patrick thanks for the reply. but will the moment.js display the exact date info as what is rendered inside the "created" field inside the list view ?because i do not want users to get different date format for the created date inside the lists view and inside the display template.. so i was searching if i can get the built-in value for created date rather than relying on external js libraries.. or this is not possible, and i need to rely on external libraries?
    – John John
    Commented Oct 15, 2016 at 1:09

1 Answer 1

Reset to default
1

yes its possible to show this type of date format. To do this, i added a jquery and jquery plugin in the display template and then modified the date format.

Follow the below mentioned steps:

  1. add script references :

    <body>
 <script>
//below code ensures jquery and jquery plugin are loaded before display template code executes
//also ensure jquery and jquery plugin paths are correct
   $includeScript(this.url,"~sitecollection/_catalogs/masterpage/Branding/jquery.timeago.js");

   $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Branding/js/jquery.timeago.js");
   SP.SOD.executeFunc("jquery.timeago.js", null, function() {             
   });
</script>

//your display template code follows below

  2. now to format the date in a friendly manner, use the plugin code as below:

    _#= $htmlEncode(jQuery.timeago(ctx.CurrentItem.Created)) =#_

jquery plugin reference - jQuery timeago plugin

Edit:

Based on the comments , updating the answer:

Include the script as follows:

$includeScript(this.url, "~sitecollection/_layouts/15/SP.dateTimeUtil.js");

Now to format as per SharePoint's date format use it like below:

_#= SP.DateTimeUtil.SPRelativeDateTime.getRelativeDateTimeString(new Date(ctx.CurrentItem.Created), true , SP.DateTimeUtil.SPCalendarType.none, false ) =#_

this works exactly the same way SharePoint stores date.

Further reading - Mikael Svenson's Creating custom display template for CSWP

Improve this answer
3
  • ok thanks for the valuable reply. But I was searching for another approach which uses the same approach which renders the “created” field inside the list views .so that users will always get the same results inside the display template and inside the list views for the “created” field. What I mean is that, let say an item is created at 1-1-2013 , now inside the SharePoint list views the date will be shown as follow “1 January, 2013”, while inside the timeago it will show something such as “4 years ago” as mentioned inside their documentation, and many other differences.
    – John John
    Commented Oct 15, 2016 at 1:05
  • ..so I was asking if inside the display template I can reference the same value that is being rendered inside the list views for the “created” column ? so the “created” value will be the same inside the display template and inside the list views?
    – John John
    Commented Oct 15, 2016 at 1:06
  • wonderful ,worked very well.
    – John John
    Commented Oct 18, 2016 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.