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.
1 Answer
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
-
Thanks, @jerry, I already tried this solution but it didn't work for me. Have you tried the same at your end? Dec 19, 2018 at 9:10
-
Here is my query : https://<domain>/sites/Trial/Lists/ITTickets/AllItems.aspx?FilterField1=Created&FilterValue1=2018/12/03&FilterOp1=Geq&FilterField2=Created&FilterValue2=2018/12/05&FilterOp2=Leq ..... I have also tried by making calculated column Dec 19, 2018 at 9:18
-
Have tested in my side, worked as expected, is there any error in your side ?– JerryDec 19, 2018 at 10:12
-
Now it is working, but I have to create a calculated column for that. Dec 19, 2018 at 11:18
-
@TezzChaudhary. Great to hear it is working, yes, need to created a calculated column– JerryDec 20, 2018 at 2:10