Unnie Ayilliath

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

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 :

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.