In this article I will explain with an example, how to use the Bootstrap DatePicker (Calendar) with TextBox ASP.Net.
This article will also illustrate how to get the selected Date of the Bootstrap DatePicker (Calendar) on Server Side (Code Behind) on Button click in ASP.Net using C# and VB.Net.
The Date format for the selected Date will be set to dd/MM/yyyy format.
 
 
Bootstrap DatePicker Plugin
This article makes uses of the DatePicker for Bootstrap plugin.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox and a Button. The ReadOnly property of the TextBox is set to True.
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
 
 
Applying Bootstrap DatePicker Plugin to ASP.Net TextBox
Inside the jQuery document ready event handler, the Bootstrap DatePicker Plugin is applied to the ASP.Net TextBox and the Date format is set to dd/MM/yyyy.
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<!-- Bootstrap -->
<!-- Bootstrap DatePicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap DatePicker -->
<script type="text/javascript">
    $(function () {
        $('[id*=txtDate]').datepicker({
            changeMonth: true,
            changeYear: true,
            format: "dd/mm/yyyy",
            language: "tr"
        });
    });
</script>
 
 
Fetching the value of the Selected Date on Server Side
Inside the Button Click event handler, the value of the Selected Date is fetched from the Request.Form collection and it is displayed using JavaScript Alert Message Box.
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.
 
C#
protected void btnSubmit_Click(object sender, EventArgs e)
{
    string dt = Request.Form[txtDate.UniqueID];
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Selected Date: " + dt + "');", true);
}
 
VB.Net
Protected Sub btnSubmit_Click(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
Bootstrap DatePicker (Calendar) example in ASP.Net
 
 
Demo
 
 
Downloads