Using ASP.NET TextBox Control to filter SharePoint ListView WebPart

Question

I have a SharePoint ListView WebPart that I need to filter. I'm using a ASP.NET DropDown List Control, and two ASP.NET texboxes (TextMode="Date"). The selected values of these three elements are sent to parameters, which are used to filter the list. The dropdown list works just fine, and filters accordingly, the issue is the textboxes. It works just fine in Chrome, I guess because Chrome recognizes type="date", but that's not the case with IE.

This is my relevant code, if more is needed, please let me know:

 <div class="startDate" style="float:left; margin-left:4px">
   <asp:Label AssociatedControlID="startDateBox" Text="Start Date" BackColor="Aqua" Font-Size="X-Large" ID="startLabel">Start Date</asp:Label>
   <asp:TextBox Text="" ToolTip="From" AutoPostBack="true" runat="server" TextMode="Date" ID="startDateBox" CausesValidation="true"></asp:TextBox>
</div>
<div class="endDate" style="float:left; margin-left:4px">
   <asp:Label AssociatedControlID="endDateBox" ToolTip="To" Font-Size="X-Large" ID="endLabel">End Date</asp:Label>
   <asp:TextBox AutoPostBack="True" runat="server" TextMode="Date" ID="endDateBox" CausesValidation="True" AutoCompleteType="Enabled" ValidateRequestMode="Enabled" Text=""></asp:TextBox>
</div>

What can I do do here? What Am I missing? Thanks in advance.

Osama Abdulhamied · Accepted Answer · 2017-03-22 22:19:13Z

1

Date TextMode is not supported in IE, so it won't work with IE using these HTML5 attributes. You can use JQuery UI Date Picker as alternative, please check the sample in below.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>

Also, you can check more details from this link https://jqueryui.com/datepicker/

answered Mar 22, 2017 at 22:19

Osama Abdulhamied

324 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cubanGuy Over a year ago

Thank Osama, but it is not worth to load jQuery for just this one feature. I went ahead and used a Date Filter Webpart instead. It is not exactly what I wanted, but it works jut fine.

Collectives™ on Stack Overflow

Using ASP.NET TextBox Control to filter SharePoint ListView WebPart

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related