In this article I will explain with an example, how to implement
Bootstrap DateTimePicker in
ASP.Net Webforms.
Download Bootstrap DateTimePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation is available on the following page.
HTML Markup
The
TextBox has been assigned
Bootstrap classes and is associated with an
HTML SPAN element which displays the
FontAwesome Glyphicon Calendar Icon.
The
Button has been assigned an
OnClick event handler.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date'>
<asp:TextBox runat="server" ID="txtDateTime" CssClass="form-control"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<asp:Button runat="server" Text="Submit" class="btn btn-primary" OnClick="OnSubmit" />
</div>
</div>
</div>
</div>
Bootstrap DateTimePicker Plugin implementation
Inside the
HTML Markup, first the following
CSS files are inherited.
1. bootstrap.min.css
2. font-awesome.min.css
3. bootstrap-datetimepicker.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. bootstrap.min.js
3. moment-with-locales.min.js
4. bootstrap-datetimepicker.min.js
Inside the
jQuery document ready event handler, the
TextBox has been applied with the
Bootstrap DateTimePicker plugin and also the
HTML SPAN element with class
glyphicon-calendar has been assigned with
jQuery Click event handler.
Inside the
Click event handler, the
focus function of the
TextBox is called which displays the
Bootstrap DateTimePicker Calendar.
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*= txtDateTime]").datetimepicker();
$('.glyphicon-calendar').click(function () {
$("[id*= txtDateTime]").focus();
});
});
</script>
Displaying Date and Time from Server Side
Inside the Button
Click event, the value of the selected Date and Time is displayed using
JavaScript Alert Message Box using the
RegisterClientScriptBlock function.
C#
protected void OnSubmit(object sender, EventArgs e)
{
DateTime dt = Convert.ToDateTime(txtDateTime.Text);
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Selected Date and Time : " + dt.ToString() + "')", true);
}
VB.Net
Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
Dim dt As DateTime = Convert.ToDateTime(txtDateTime.Text)
ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('Selected Date and Time: " & dt.ToString() & "')", True)
End Sub
Screenshot
The Form
![ASP.Net Webforms: Bootstrap DateTimePicker Example]()
DateTime object displaying the selected DateTime
![ASP.Net Webforms: Bootstrap DateTimePicker Example]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
