In this article I will explain with an example and attached sample code, how to display a Calendar control in ASP.Net with facility to select time.
ASP.Net AJAX Calendar Extender control does not have option to select time and hence an alternative jQuery Calendar with Date and Time selection can be used.
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
