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 HTML Markup consists of an ASP.Net TextBox and a Button.
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>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <asp:Button runat="server" Text="Submit" class="btn btn-primary" OnClick="OnSubmit" />
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="" />
<link rel="stylesheet" href="">
<link href="" rel="stylesheet" />
<script src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" >
    $(function () {
        $('.glyphicon-calendar').click(function () {
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.
Note: For more details on using ClientScript.RegisterClientScriptBlock, please refer my article, Using ClientScript.RegisterClientScriptBlock in ASP.Net.
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);
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
The Form
ASP.Net Webforms: Bootstrap DateTimePicker Example
DateTime object displaying the selected DateTime
ASP.Net Webforms: Bootstrap DateTimePicker Example
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.