In this article I will explain with an example, how to use the Bootstrap 4 DatePicker (Calendar) with TextBox in ASP.Net using C# and VB.Net.
This article makes use of Bootstrap version 4.
Download Bootstrap DatePicker Plugin
You will need to download the plugin files from the following location.
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 HTML, the following Bootstrap 4 CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datepicker.css
And then, the following Bootstrap 4 JS files are inherited.
1. jquery.min.js
2. bootstrap-datepicker.js
3. bootstrap.bundle.min.js
Inside the jQuery document ready event handler, the Bootstrap DatePicker plugin is applied to the TextBox.
The DatePicker plugin has been assigned following properties:
format – mm/dd/yyyy
The DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
language – tr
The two letter code of the language to use for month and day names.
<!-- 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/4.6.2/js/bootstrap.bundle.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css' />
<!-- 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({
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 4: DatePicker (Calendar) example in ASP.Net]()
Demo
Downloads
