ASPNet Webforms Bootstrap DateTimePicker Example

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.

https://getdatepicker.com/4/#bootstrap-3-datepicker-v4-docs

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.

<asp:TextBox runat="server"ID="txtDateTime" CssClass="form-control"></asp:TextBox>

</span>

</div>

<asp:Button runat="server" Text="Submit" class="btn btn-primary" OnClick="OnSubmit" />

</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.

$(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.

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);

}

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

Screenshots

The Form