Coveo Date Slider and Filter Expressions (Coveo for Sitecore)

So I had been using Coveo for Sitecore for a little while when someone pointed out that the date slider was going back to 1968 for all of my search pages. Initially I couldn’t understand why as I had Filter Expressions which restricted it to only surface by template. Within that template, the oldest date was 2013! I reached out to Coveo and they explained that it uses the earliest date in the entire index. Well since I had publications dating back to 1968 that meant all my date sliders were all set to an old date that would only work for one of my templates.

In order to solve the problem, I needed to force the date slider to respect the start date that I wanted it to use. Luckily for me, the content will never be back dated so that allowed me to cheat based on my template. So with a little bit of JavaScript within a Filter Expression, I managed to set the data-start attribute on the date slider.

        var startDate = "2013/09/12"; //cheat - earliest event in system
        // set the root only if this is a new DOM
        var root = document.querySelector("#coveo4df47130");
        if (root != null && !detectIE()) { //doesn't work for ie - so skip it
            // afterInitialization event
            Coveo.$$(root).on("beforeInitialization", function (e, args) {
                Coveo.$$(document).find(".CoveoFacetSlider[data-title='Content Date']").setAttribute("data-start", startDate);
            });

            // Coveo init, end of the DOM
            Coveo.init(root);
        } else {
            //IE solution that may work for other browsers but came up with solution after other was well vetted 
            document.getElementById("coveo4f940ebd").setAttribute("data-start", startDate);
        }

Another issue I ran into came from a requirement to link to the same search page but toggle Upcoming or Past Events. Since it used the same search page, my initial attempt was to programmatically modify the link to set a DateRange

&f:ContentDate:range=[1378958400000,1566432000000]

My initial thinking was a bit flawed (hey it happens) as I had tried to cover this by setting very large ranges. For past events, I used January 1, 1970 to today. For Upcoming events, I used today to 3 years from today. One problem with this was that Coveo still tried to plot my dates within the slider. Events ranged from 2013 to 2020 so you can imagine what happens when you plot 1970 and 2022. Yup – it is way off the intended slider range.

For past events, the fix was simple – use the hack and set the start date to the earliest event in the system. For Upcoming events, it was a bit trickier as you had no way to know how far out the furthest event was. It turns out I was better off handling this as part of the Filter Expression vs trying to pass the date range parameter. There was a special parameter in use so that I knew to dynamically add the Coveo parameters. Using this knowledge, I look for the parameter and set the start date of the slider to today! The key is to also add this filter to your expression builder.

   document.addEventListener('DOMContentLoaded', function () {
        var expressionBuilder = new Coveo.ExpressionBuilder();
        //get the template field 
        var fieldName = CoveoForSitecore.Context.fields.toCoveo('@@mprdisplaytemplatename');
        //get the date field - note: using a custom date
        var dateFieldName = CoveoForSitecore.Context.fields.toCoveo('@@mprcomputedcontentdate');
        //the template that I'm restricting search to
        var templateName = 'Event';
       //the expression to restrict by template
        expressionBuilder.addFieldExpression(fieldName, '==', [templateName]);               
        
        var startDate = "2013/09/12"; //cheat - earliest event in system 
        if(window.location.href.indexOf('CoveoUpcomingEvents')>-1){ //if Upcoming set date to today
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0 not 1!
            var yyyy = today.getFullYear();

            startDate = yyyy + '/' + mm + '/' + dd;
            //If upcoming, set an additional expression that only shows events today and forward. 
            expressionBuilder.addFieldExpression(dateFieldName, '>=', [startDate]);
        }
        
        document.getElementById('currentSiteFilterExpression').dataset.scAdvancedFilter = expressionBuilder.build();
        // set the root only if this is a new DOM
        var root = document.querySelector("#coveo4df47130");
        if (root != null && !detectIE()) { //doesn't work for ie - so skip it
            // afterInitialization event
            Coveo.$$(root).on("beforeInitialization", function (e, args) {
                Coveo.$$(document).find(".CoveoFacetSlider[data-title='Content Date']").setAttribute("data-start", startDate);
            });

            // Coveo init, end of the DOM
            Coveo.init(root);
        } else {
            //IE solution that may work for other browsers but came up with solution after other was well vetted 
            document.getElementById("coveo4f940ebd").setAttribute("data-start", startDate);
        }
    });