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.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s