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

  • 1
    I always use the moment.js library to modify my dates. Maybe you can check if that's an option for you. – Patrick Oct 14 '16 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 Gu Oct 15 '16 at 1:09
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

  • 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 Gu Oct 15 '16 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 Gu Oct 15 '16 at 1:06
  • wonderful ,worked very well. – john Gu Oct 18 '16 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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