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.
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
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
Downloads
Download Code
