SharePoint 2013 does not have code to implement dynamic filtering of time periods in the List View

This article describes two methods to set time period filters for the List View. The first method is used for Sharepoint Server, and the second method can also be used for Sharepoint Foundation.

Method 1: Date filter Web parts

Let's take a look at the list to be used next, which is a task list:

For the convenience of the experiment, we first create a page to place the target list view and filter.

1. Open SPD, select "website page" on the left, and click "new"-> "Web parts page" in the functional area ".

If the page already exists, right-click Edit in advanced mode.

2. Find the webpart zone in the main area of the page and insert the cursor in the zonetemplate.

Select Insert and data view. Insert the target list.
3. In the List View tool, select "Parameters" in "filter, sort, and group ".

Create two parameters. Set the parameter source to none by default.

4. Then, use the buttons on the functional area to set filter conditions for the List View. Display items greater than or equal to [startdate] and less than or equal to [enddate] in the List View.

5. Insert two "date filter" webparts above the webpart view.

6. Save the page. Click Preview in the browser on the functional area.

7. Enter the page editing mode. Select the first date filter and set the filter name in the webpart attribute. The default value is.

Set the second one.

8. join later. Select the first date filter, and select webpart connection to filter the sending location of the value. To the list view below. Here is taskdemo.

9. In the displayed window, set the connection type to the parameter location. Click "Configure.

10. Select the parameter name corresponding to the receiver. startdate is used here.

11. The design view is like this.

12. Set the connection of the second date filter in the same way. Connect to the enddate parameter.

13. Exit the design mode of the page.

Test results:

 

Method 2: PASS Parameters to the control

In this way, we use our own widget to input the date. The degree of freedom is relatively higher, and the difficulty is also slightly increased.

1. The first step is to prepare the page and list view. See Step 1 and step 2 of method 1.

2. Insert the cursor outside the webpartzone of the webpart View:

Insert the following table and controls:

<Table class = "MS-formtable" style = "margin-top: 8px; "Border =" 0 "cellspacing =" 0 "cellpadding =" 0 "> <tbody> <tr> <TD width =" 113 "class =" MS-formlabel "nowrap =" true "valign =" TOP "> <H3 class =" MS-standardheader "> <nobr> Start Time: <span Title = "this is a required field. "Class =" MS-accenttext "> * </span> </nobr> 
The focus is on using SharePoint datetimecontrol to facilitate Date input, and using hidden ASP. NET textbox to store control values. ASP. NET button is used for Page Submission. At the same time, enter the date value of datetimecontrol in the corresponding textbox through Js. The reason for this is that when the following view webpart is connected to a parameter, it is impossible to directly get the parameter value from controls such as datetimecontrol. Textbox can. The results are as follows:

Of course, this example uses parameters of the control value type. You can also query string parameters to splice the values to the URL (see the blog post of Yu ).
3. In the placeholderadditionalpagehead part, insert the reference of jquery. js before inserting our JS Code:

The Code is as follows:
<script src="../_layouts/15/js/jquery.js" type="text/javascript"></script><script type="text/javascript">String.prototype.replaceAll=function(str1,str2){var regS=new RegExp(str1,"gi");return this.replace(regS,str2);}function SetStartEndDate(name){ var startstr="scStart"; var endstr="scEnd"; var selectedStartDate=$("input[id][name$=‘"+startstr+"Date‘]").val(); selectedStartDate=selectedStartDate.replaceAll("/","-"); $("input[id][name$=‘"+startstr+"Textbox‘]").val(selectedStartDate);  var selectedEndDate=$("input[id][name$=‘"+endstr+"Date‘]").val(); selectedEndDate=selectedEndDate.replaceAll("/","-"); $("input[id][name$=‘"+endstr+"Textbox‘]").val(selectedEndDate);}</script>
4. Similarly, you must set parameters and filter the view webpart. The source selection control of the parameter here. The control ID is the ID of the textbox above. The filtering conditions are similar. For more information, see Step 3 and 4 of method 1. This is the case.

5. Save the page. Click Preview in the browser on the functional area. Enter a time period and click query to verify the result. The filtering result is similar to the first one, so we will not repeat it again.
 
References
SharePoint: list filtering by date range