display template · refiner · search · sharepoint 2013

Custom Date time refiner template for SharePoint 2013

SharePoint 2013 OOTB display options for DateTime refiners are very limited. By default there are four  display options available for DateTime refiners:

Screen Shot 2015-07-08 at 20.52.31
Slider with bar graph
Screen Shot 2015-07-08 at 20.53.41
Screen Shot 2015-07-08 at 20.54.43
Refinement Item
Screen Shot 2015-07-08 at 20.55.30
Multi Value Refinement Item

But these refinement options are often not suitable as the range for each refinement value is too big and there is no option to refine the results between 2 specific dates.

So let’s see how we can create a custom DateTime refiner template using  bootstrap date picker controls , which can be used to filter results between two dates. Below is the screenshot of how the date range refinement will finally look like :

Screen Shot 2015-07-08 at 21.06.18
Custom Date range refiner

First of all you need to have the below 3 files ready to use the Bootstrap date picker control.

  1. Moment.js – To apply custom format of date time display.
  2. bootstrap-datepicker.js
  3. Bootstrap-datetimepicker.min.css

See the other prerequisite files needed for Bootstrap date picker here.

You can download the Filter display template here.

Once you have all these files uploaded to SharePoint style library. You can open the site in SP Designer. Go to _catalogs->master page->DisplayTemplates->Filters. Upload the Filter_DateTimeRange.html here.

Note: I have used Bootstrap date picker here, you could use any datepicker for e.g.:Jquery UI date picker etc, the refinement panel code will remain the same.

4 thoughts on “Custom Date time refiner template for SharePoint 2013

  1. for me its throwing error object doesn’t support datatimepicker on post render…Help is much appreciated..Thanks

    1. Please make sure you have added the prerequisite files:
      Bootstrap.js (transition and collapse are required if you’re not using the full Bootstrap)
      Bootstrap CSS

      And make sure these files are loaded in the page. From the error message you get it seems on the these files are not loaded onto the page.

  2. Awesome find & code. Thanks a lot. Have been searching a way to link the custom date controls & the AjaxToolkit plugin (default slider graph template). But this is neat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s