How to Attach Datepicker to Asp.Net TextBox Control using jQuery

The datepicker is a popular control for date fields in online submission forms. In this article, let's see how to use the jQuery UI to attach a datepicker to an ASP.NET TextBox control.

Create a new web form DatepickerDemo.aspx in the current project.

Add controls to create a simple search form that accepts an input date field as follows:

<form id="form1" runat="server">
<div align="center">
<asp:Label ID="lblDate" runat="server">Search by
registration date: </asp:Label>
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" Text="Search" runat="server" />
</div>
</form>

Thus, on page load, the web form appears as shown in the following screenshot:

We will now use jQuery UI to attach a datepicker to the TextBox control.

Apply the datepicker() method to the TextBox control:
$("#txtDate").datepicker();

Thus, the complete jQuery solution for the given problem is as follows:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#txtDate").datepicker();
});
</script>