In this article I will explain with an example, how to implement jQuery UI DatePicker in ASP.Net.
This article will also illustrate how to get the selected Date of the jQuery UI DatePicker (Calendar) on Server-Side (Code-Behind) on Button click in ASP.Net using C# and VB.Net.
 
 

HTML Markup

The HTML Markup consists of following controls:
TextBox – For displaying date.
The ReadOnly property of the TextBox is set to TRUE.
Button – For displaying selected Date.
The Button has been assigned with an OnClick event handler.
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
<hr />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="OnSubmit" />
 
 

Applying jQuery UI DatePicker Plugin to ASP.Net TextBox

Inside the HTML, following CSS file is inherited.
1. jquery-ui.css
 
And then, the following JS script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the jQuery UI DatePicker Plugin is applied to the ASP.Net TextBox.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=txtDate]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
    });
</script>
 
 

Fetching the value of the Selected Date on Server Side

When the Submit Button is clicked, the value of the selected Date is fetched from the TextBox using Request.Form collection and it is displayed in JavaScript Alert Message Box using RegisterStartupScript method.
Note: Request.Form collection is used as in some browsers the Text property does not hold the value set from Client-Side when the TextBox is set as ReadOnly.
           For more details on how to display Alert Message box from code behind, please refer my article Display Alert Message in ASP.Net from code behind using C# and VB.Net.
C#
protected void OnSubmit(object sender, EventArgs e)
{
    string dt = Request.Form[txtDate.UniqueID];
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Selected Date: " + dt + "');", true);
}
 
VB.Net
Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As String = Request.Form(txtDate.UniqueID)
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Selected Date: " & dt & "');", True)
End Sub
 
 

Screenshot

jQuery UI DatePicker (Calendar) Example in ASP.Net
 
 

Demo

View Demo
 
 

Downloads