Filter Lists by Date Range

On a recent project one of the requirements was that users be able to filter a list by a date range.  To this I tried using two date filter webparts connected to a data view webpart.  A detailed description of how to set this up can be found here.  This solution worked well enough but there was a page refresh after the user entered each date, so the user enters the first date (page refresh) user enters second date (page refresh again) and finally they get the results.  This annoyed me, I wanted to remove the extra page loads so I tried several things and this is what I finally came up with.

Setup

Using a content editor webpart build the form elements needed to collect the dates, two inputs and a search button.  Give each input a unique ID. Here is the code I used.

<script language="JavaScript">
function submitForm()
{
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
window.parent.location="default.aspx?T1=" + startDate + '&T2=' + endDate;
}
</script>
<p><div id="dateDiv" style="display:none;" class="filterBox">
<h4>Date Search</h4>
        Between
<input name="startDate" type="text" id="startDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
and
<input name="endDate" type="text" id="endDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
 YYYY-MM-DD
<input type="submit" name="Submit" value="Go"  onClick="submitForm();this.disabled=true;">
</div>

The class names are used to activate the date picker script but can be whatever you want. I used this date picker script from Frequecy Decoder

The submitForm() function simply takes the values from the inputs and adds them as query string variables at the end of the URL. We can now use these values to filter the list.

Filtering the Data View Web part

To filter the content of the DVWP based on the date we have to setup some parameters for the start and end dates.   Under ‘Common Data View Tasks’ just choose ‘Parameters’ for both the start and end date set the source as ‘Query String’. The query string variable will be whatever you defined in the JavaScript so in this case they are T1 and T2. Set the default value for the start date to some date impossibly far in the past and for the end date set it to something like the year 3000. This will ensure that the list will show all records if no values are passed for the start and end dates.

parameters

Then all you have to do is setup your filter based on the parameters from the query string.

filter

You’re done.

Things to remember

The date has to be passed in YYYY-MM-DD format in order to work.

If the detault values for your start and end date parameters are not set high / low enough all records will not display when not date range is entered.

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

7 thoughts on “Filter Lists by Date Range

  1. I tried this but it doesnt work. any ideas. on the submit, the page gets redirected back with the querystring correctly but the DVWP is empty.

    Any ideas?

    Also how can I use a datepicker with this approach?

    Rgds
    SSP

    1. Make sure your data view web part is set to get the parameters from the query string.
      Make sure the DVWP is set to filter based on the parameters

      For the date picker I just used the one found here. Most date picker scripts just require you to add a JavaScript to the page and add a special ID or class to the text field.

  2. Great post. I’ve been trying to figure out the correct format for passing a date value using the query string, and this solved my problem!

    Thanks for sharing this.

    -T

Leave a Reply

Your email address will not be published. Required fields are marked *