In this article I will explain with an example, how to use the
Bootstrap 5
DatePicker (Calendar) with
TextBox in
ASP.Net using C# and VB.Net.
This article makes use of
Bootstrap version 5.
Download Bootstrap DatePicker Plugin
You will need to download the plugin files from the following location.
HTML Markup
The HTML Markup consists of:
Button - For
submitting a selected Date from
DatePicker (Calender).
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 5 CSS files are inherited.
1. bootstrap.min.css
2. bootstrap-datepicker.css
And then, the following
Bootstrap 5 JS files are inherited.
1. jquery.min.js
2. bootstrap-datepicker.js
3. bootstrap.bundle.min.js
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.
<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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.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 5: DatePicker (Calendar) example in ASP.Net]()
Demo
Downloads
