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 Osama Abdulhamied · Accepted Answer · 2017-03-22T22:19:13

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/

Using ASP.NET TextBox Control to filter SharePoint ListView WebPart

1 Answers