Date range filtering in a list using JSOM

Question

I want to add a date range filter on a list/library. I tried with the out of box date filter web part but it is causing some issue as search box disappeared & no items in the list if the value is null in the filter textboxes.

I have followed the above steps from here and here

Answer 1

You could build custom search box to enter from, to and then use SharePoint url filter like this:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
  $(function() {
    $( "#startdatepicker" ).datepicker();
    $( "#enddatepicker" ).datepicker();
});
</script>

<script type="text/javascript">
/*Entry point to our script*/
function getFilter()
{
    var sourceURL =document.URL; //get the URL
    /*
    Remove existing querystrings added by our script and gives us a clean URL.
    This removes the parameters FilterField1,FilterOp1,FilterValue1,FilterField2,FilterOp2,FilterValue2
    */
    var url = removeParam(sourceURL);
    var from = document.getElementById('startdatepicker').value;
    var end= document.getElementById('enddatepicker').value;
    if(from!='' && from !='undefined')
    {
        if(end!='' && end!='undefined')
        {
            if(from <= end)
            {
            var startDate = new Date(from)
            var toDate = new Date(end);
            var startdate=startDate.format("yyyy/MM/dd");//convert format yyyy/MM/dd. Here we are using the format prototype.
            var enddate=toDate.format("yyyy/MM/dd");
            window.location = url+'FilterField1=Created&FilterValue1='+startdate+'&FilterOp1=Geq&FilterField2=Created&FilterValue2='+enddate+'&FilterOp2=Leq';
            }
            else
            {
            alert("Please ensure that the To Date is greater than or equal to the From Date.");
            return false;
            }
        }
        else
        {
            alert("Please select To date");
            return false;
        }
    }
    else
    {
        alert("Please select From date");
        return false;
    }
}

function removeParam(sourceURL) {
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === "FilterField1") {
                params_arr.splice(i, 1);
            }
            if (param === "FilterValue1") {
                params_arr.splice(i, 1);
            }
            if (param === "FilterOp1") {
                params_arr.splice(i, 1);
            }
            if (param === "FilterField2") {
                params_arr.splice(i, 1);
            }
            if (param === "FilterValue2") {
                params_arr.splice(i, 1);
            }
            if (param === "FilterOp2") {
                params_arr.splice(i, 1);
            }
        }
        rtn = rtn + "?" + params_arr.join("&");
    }
    else
    {
        rtn=rtn+"?";
    }
    return rtn;
}
</script>
From: <input type="text" id="startdatepicker"/> To: <input type="text" id="enddatepicker"/><input id="btnFilter" onclick="getFilter()" type="button" value="Filter" />

Reference: Filter a SharePoint list between 2 dates