1

The OOTB search refiners for dates all seem to assume that there are only dates from the past up to today. If I have a RefinableDate with future dates they all get piled up on an interval labeled "Today."

And I'm actually okay with them all piled up on Today, but I don't want it to say "today" -- I'd like something like Upcoming or Future... I've downloaded the Filter_SlideBarGraph.html file and looked at it. This bit seems promising

ctx.BucketedFilterData = AjaxControlToolkit.SliderRefinementControl.GetDefaultBuckets(ctx);

But I can't seem to work out what the labels in there should be to make it work. There in the ctx.BucketedFilterData there is a BoundaryValues object and also an Intervals object. Both of which have Labels that read "Today."

Changing the Intervals[3].Label="My future label" doesn't seem to do anything. Changing it for the Boundary items does change what shows, but ends up cobbling together things like "Earlier than the Future" instead of "Earlier than Today"

Has anybody used a date search refiner with future dates?

  • The above code I pasted and renamed. On selecting the display template for modified date. It gave error – user73202 Jan 17 '18 at 9:42
0

Have a look at this solution I posted. You don't have to change the refiner, you can change the web part properties: Search refinement by date

  • Thanks for the tip, but this didn't seem to work for me. I tried [-365,-1,7,30] That did seem to bucket the results correctly, but the labels under the slider was all messed up still said Today on the right. If I change to Custom Date Time Display template I still end up with a Today as the last bin even though it should be in the middle. And it shows a returned item, but it doesn't have the right date. – Rothrock Jul 8 '15 at 16:03
0

You can maybe create a custom refiner template for Date and use it instead of the OOTB slider graph.

Please see below code to create a template with bootstrap Datetime Picker controls instead of Slider.

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <title>Date Time Range Filter</title>
    <!--[if gte mso 9]>
    <xml>
        <mso:CustomDocumentProperties>
            <mso:CompatibleManagedProperties msdt:dt="string"></mso:CompatibleManagedProperties>
            <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
            <mso:CompatibleSearchDataTypes msdt:dt="string">;#DateTime;#Integer;#Decimal;#</mso:CompatibleSearchDataTypes>
            <mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
            <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106604</mso:ContentTypeId>
            <mso:TargetControlType msdt:dt="string">;#Refinement;#</mso:TargetControlType>
            <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
            <mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
            <mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
    </xml>
    <![endif]--><mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://test.unnie.org/_catalogs/masterpage/Display Templates/Filters/Filter_DateTimeRange.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://test.unnie.org/_catalogs/masterpage/Display Templates/Filters/Filter_DateTimeRange.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://test.unnie.org/_catalogs/masterpage/Display Templates/Filters/Filter_DateTimeRange.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://test.unnie.org/_catalogs/masterpage/Display Templates/Filters/Filter_DateTimeRange.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://test.unnie.org/_catalogs/masterpage/Display Templates/Filters/Filter_DateTimeRange.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
 <script>
        $includeLanguageScript(this.url, "~sitecollection/Style%20Library/JS/Nucleus/bootstrap-datepicker.js");

    </script>


</head>
<body>
    <div id="RangeFilter">
        <!--#_          
        var listData = ctx.ListData;
        var hasControl = true;

        // Check if the current Refinement Control exists
        if ($isNull(ctx.RefinementControl) || $isNull(ctx.ClientControl)) hasControl = false;

        if (hasControl) {
            // Check if listdata contains data.the below check is commented so that if no data is present in the date range still this date time control will be visible to clear the filter and reload original data.
            //if(!$isNull(listData) && !$isEmptyArray(listData)) {
                // Element IDs
                var controlID = ctx.RefinementControl.containerId + "_" + ctx.RefinementControl.propertyName;
                var fromInput = controlID + "_from";
                var toInput = controlID + "_to";
                var refineLink = controlID + "_refine";
                var clearLink = controlID + "_clear";

                // Show the refinement title
                var isExpanded = Srch.Refinement.getExpanded(ctx.RefinementControl.propertyName);
                var iconClass = (isExpanded == "true"? "ms-ref-uparrow" : "ms-ref-downarrow");
                var refinerCatTitle = Srch.Refinement.getRefinementTitle(ctx.RefinementControl);
                // Display style > needed to hide the refinement list when collapsed
                var displayStyle = (isExpanded == "true"? "" : "none");

                // Set input form values
                var from = "";
                var to = "";
                var currentRefinementCategory = ctx.ClientControl.getCurrentRefinementCategory(ctx.RefinementControl.propertyName);
                // Check if the current control refinement is in use
                if(!Srch.U.n(currentRefinementCategory) && currentRefinementCategory.get_tokenCount() == 1) {
                    // Parse the current filter token to find the current range condition
                    var matchResults = Srch.U.parseTypedRangeToken(currentRefinementCategory.t[0], null);
                    // check for a range token match with corresponding min and max
                    if (matchResults != null && matchResults.length > 2) {
                        var from = matchResults[1] === "min" ? "" : matchResults[1];
                        var to = matchResults[2] === "max" ? "" : matchResults[2];
                        if(from!="")
                        {
                        var fromDate=new Date(from);
                        var month=("0" + (fromDate.getMonth()+1)).slice(-2);
                        from= ("0" + fromDate.getDate()).slice(-2)+"/"+month+"/"+fromDate.getFullYear();
                        }                    
                        if(to!="")
                        {
                         var toDate=new Date(to);
                           var month=("0" + (toDate.getMonth()+1)).slice(-2);
                         to= ("0" + toDate.getDate()).slice(-2)+"/"+month+"/"+toDate.getFullYear();
                        }
                    }
                }
_#-->
                <div id='Container'>
                    _#= Srch.U.collapsibleRefinerTitle(ctx.RefinementControl.propertyName, ctx.ClientControl.get_id(), refinerCatTitle, iconClass) =#_
<br/>
                    <div class='ms-ref-unselSec' style='display:_#= $htmlEncode(displayStyle) =#_'>
                     <div class="row" style="padding-bottom:5px">
                     <div class="col-xs-24 col-sm-24 col-md-24 col-lg-24">
                        <label for='_#= fromInput =#_' style="padding-bottom:5px">From</label> &nbsp;&nbsp;<br/>
                        <input class = "form-control form-datepicker" type="text" data-date-format = "DD/MM/YYYY" id='_#= fromInput =#_' name='from' value='_#= from =#_' />
                        </div>
                        </div>

                         <div class="row" style="padding-bottom:5px">
                        <div class="col-xs-24 col-sm-24 col-md-24 col-lg-24">
                        <label for='_#= toInput =#_' style="padding-bottom:5px">To</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
                        <input class = "form-control form-datepicker" type="text"  data-date-format = "DD/MM/YYYY" id='_#= toInput =#_' name='to' value='_#= to =#_' />
                        </div>
                        </div>

                        <div class="row" style="padding-bottom:5px">
                        <div class="col-xs-24 col-sm-24 col-md-24 col-lg-24">
                      <a class="label label-primary" style="padding: 10px 10px 10px 10px;" href='javascript:{}' id="_#= refineLink =#_">Refine</a>&nbsp;&nbsp;
                        <a class="label label-primary" style="padding: 10px 10px 10px 10px;" href='javascript:{}' id="_#= clearLink =#_">Clear</a>
                        </div>
                        </div>
                    </div>
                </div>
<!--#_
                ctx.OnPostRender = [];
                ctx.OnPostRender.push(function () {

                $('.form-datepicker').datetimepicker({
                                pickTime: false

                               });

                      // Retrieve the two hyperlinks 
                    var refineLinkElm = document.getElementById(refineLink);
                    var clearLinkElm = document.getElementById(clearLink);

                    // Create an onclick event for the refinement link
                    refineLinkElm.onclick = function () {
                        // Retrieve the two input fields
                        var fromInputElm = document.getElementById(fromInput);
                        var toInputElm = document.getElementById(toInput);

                        // Check if the two input fields contains a value, otherwise nothing needs to be done
                        if (fromInputElm.value.trim() !== "" || toInputElm.value.trim() !== "") {
                            // Retrieve the input values
                            var fromValue = fromInputElm.value.trim() === "" ? "min" :fromInputElm.value.trim();
                            var toValue = toInputElm.value.trim() === "" ? "max" : toInputElm.value.trim();

                         if(fromValue!="min")
                         {
                         fromValue=new Date(fromValue.split('/')[1]+"/"+fromValue.split('/')[0]+"/"+fromValue.split('/')[2]).toISOString();
                         }
                         if(toValue !="max")
                         {
                         toValue =new Date(toValue.split('/')[1]+"/"+toValue.split('/')[0]+"/"+toValue.split('/')[2]).toISOString();
                         }


                            // Create the refinement JSON value string
                            var refinement = '{"'+ ctx.RefinementControl.propertyName +'":["range('+fromValue +','+toValue +')"]}';
                            $getClientControl(this).updateRefinersJSON(refinement);
                        }
                    };

                    // Create a onclick event to remove the refinement
                    clearLinkElm.onclick = function () {
                        // NULL Refinement value to remove the refinement
                        var refinement = '{"'+ ctx.RefinementControl.propertyName +'":null}';
                        $getClientControl(this).updateRefinersJSON(refinement);
                    };
                });
           // }
        }
_#-->
    </div>
</body>
</html>

Open the site in SP designer, go to catalogs-> masterpage-> Display Templates-> Filter. Add new Html , copy paste the above code, name it Filter_DateRange.html.

Prerequisite files:

<script src="/Style%20Library/JS/moment.js" type="text/javascript"></script>​​​​​​ 
<script src="/Style%20Library/JS/bootstrap-datepicker.js" type="text/javascript"></script>​​​​​ ​ 
<link href="/Style%20Library/en-us/bootstrap-datetimepicker.min.css" rel="stylesheet"/>​​​​​​

Please make sure above files are loaded in the page.

  • Thank you. I can't seem to get this to work. I downloaded bootstrap-datepicker.js, put it in the Style Library and changed the url in the code.. I've got both jQuery 1.11 and bootstrap 3 on the page. For some reason it looks like $includeLanguageScript() isn't working. I don't know much about these Filter.html files. Can you explain that bit a little more. – Rothrock Jul 8 '15 at 16:49
  • Make sure you provide correct path inside $includeLanguageScript – Unnie Jul 8 '15 at 18:32

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.