Reformatting the Date display in the Refinement Panel

I have a project I am working on and I wasn’t overly thrilled with how the dates were rendering in the refinement panel. I have not really worked with modifying the Display Templates in 2013 with the exception of changing the HTML, etc. So I called one of my go-to developers Larry Riemann. Larry walked me through what seemed like a super simple solution to creating a new display template and formatting the date string the way I wanted it.


First I located the display template that I needed to copy (_catalogs/masterpage/display templates/filters/filter_default.html). Once I copied and pasted the file, I made sure to rename the file appropriately as well as changing the title in the header area of the display template. Don’t worry about copying the .js file, once you rename and save the file SharePoint will create the file.


Next I located the <DIV>with the ID ="RefinementName".  Larry then had me add in two lines of code of directly above the DIV.

var nameEndDate = new Date(refinementName);
var FormattedDate = (nameEndDate.getMonth() +1) + "/" + nameEndDate.getDate() + "/" + nameEndDate.getFullYear();

Next I updated the _#= $htmlEncode(FormattedDate) =#_  adding FormattedDate within the <DIV> tag.

After these changes I saved and published the display template. Next I had to edit the page where I wanted to change the display of the date. Once you have the tool pane open you will want to select Choose Refiners.


Next you select the template you just created, I renamed mine to Refinement Date Item. After you have that selected, you can preview or save. Press OK to save your changes, then press OK again to finish editing your web part.


Your formatted date should now show in your refinement panel.

After I had updated my display template, I realized I wanted my date to line up nicely so did a quick Google search and I updated the code to add 0’s in front of the short months and days.

var nameEndDate = new Date(refinementName);
var FormattedDate = ((nameEndDate.getMonth() +1) < 10 ? '0' : ' ') +(nameEndDate.getMonth() +1) + "/" + (nameEndDate.getDate() < 10 ? '0' : ' ') + nameEndDate.getDate() + "/" + nameEndDate.getFullYear();


Many thanks to Larry Riemann for helping me out with this.