ASPNet Webforms jQuery DateTimePicker Example

In this article I will explain with an example, how to use jQuery DateTimePicker in ASP.Net Webforms.

Download jQuery DateTimePicker Plugin

You will need to download the plugin files from the following location.

jQuery DateTimePicker

The complete documentation is available on the following page.

https://xdsoft.net/jqplugins/datetimepicker/

HTML Markup

The HTML Markup consists of an ASP.Net TextBox and a Button.

The Button has been assigned an OnClick event handler.

<asp:TextBox ID="txtDateTime" runat="server"></asp:TextBox>

<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="OnSubmit" />

jQuery DateTimePicker Plugin implementation

Inside the HTML Markup, first the following CSS file is inherited.

1. jquery.datetimepicker.css

And then, the following JS scripts are inherited.

1. jquery.min.js

2. jquery.datetimepicker.full.js

Inside the jQuery document ready event handler, the ASP.Net TextBox has been applied with the DateTimePicker plugin.

$(function () {

$("[id*=txtDateTime]").datetimepicker();

});

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