There’s no readymade DateTimePicker control available in ASP.Net hence I decided to write this article which will explain how we can easily implement a DateTimePicker Control using jQuery in ASP.Net.
To start with we will need the DynDateTime jQuery Plugin which will allow us to build out DateTimePicker Control.
 
 
HTML Markup
<asp:TextBox ID="TextBox1" runat="server" ReadOnly = "true"></asp:TextBox>
<img src="calender.png" />
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />

Above I have added an ASP.Net TextBox, a Calender Image that will act as the trigger for the Date Time Picker and a button to that will allow us to post the selected date & time to the server.
 
 
DateTimePicker Script
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>

You need to place the above script files and the jQuery script on the page. You will notice I have specified the name of the textbox to which I need to apply the DateTimePicker control.
 
 
Screenshot
That’s it you need to do to implement the DateTimePicker control. The below screenshot displays the working of the DateTimePicker control that we just implemented
DateTimePicker in ASP.Net using jQuery DateTimePicker Plugin
 
 
Fetching the values server side
On the click of the button we will fetch the values server side as shown below
C#
protected void btnSave_Click(object sender, EventArgs e)
{
    DateTime dob = DateTime.Parse(Request.Form[TextBox1.UniqueID]);
}

VB.Net
Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim dob As DateTime = DateTime.Parse(Request.Form(TextBox1.UniqueID))
End Sub
 
 
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.

 
 
Browser Compatibility
 
 
Downloads

DateTimePickerInASP.Net.zip