In this article I will explain how to make use of the TimePicker control to pick or select time in ASP.Net. The TimePicker control has different configurations, thus I have explained some them
Adding the TimePicker control to Page in ASP.Net
1. Place the TimePicker.DLL file in the BIN folder. Or you can simply add its reference.
Note: The TimePicker control is available in the attached sample code at the end of this article. Please download it using the Download button. Additionally you can download it from here.
2. The second step is not Register the TimePicker.DLL on the page using the Register Tag
<%@ Register Assembly="TimePicker" Namespace="MKB.TimePicker" TagPrefix="cc1" %>
3. Finally to use it you need to define it on the page in the following way
<cc1:TimeSelector ID="TimeSelector1" runat="server">
</cc1:TimeSelector>
![Implement TimePicker in ASP.Net with example]()
Now I will explain the different ways you can use the ASP.Net TimePicker control
Default Mode
In the default mode, the time format is 12 hour, seconds are disabled, current time is being displayed and Up / Down to increment / decrement the hours and minutes.
<cc1:TimeSelector ID="TimeSelector1" runat="server">
</cc1:TimeSelector>
ReadOnly Mode
As the name suggests here you cannot edit the time from the TimePicker control, for this you need to set the ReadOnly property to true.
By default ReadOnly property is false.
<cc1:TimeSelector ID="TimeSelector3" runat="server ReadOnly="true">
</cc1:TimeSelector>
Clock Mode
This mode simply makes the TimePicker control work like a clock where the Current Time will always be displayed and will also tick continuously as per the clock timings in your machine. To enable tis Mode you need to set EnableClock property to true
<cc1:TimeSelector ID="TimeSelector3" runat="server" EnableClock="true">
</cc1:TimeSelector>
Remove Seconds from the Time
This can be done by setting the property DisplaySeconds to false, thus this will hide the Seconds from the time displayed in the TimePicker.
By default DisplaySeconds property is true.
<cc1:TimeSelector ID="TimeSelector5" runat="server" DisplaySeconds="false">
</cc1:TimeSelector>
Hide Up / Down Buttons
This can be done by setting the property DisplayButtonsto false, thus this will hide the Up / Down from the TimePicker.
By default DisplayButtonsproperty is true.
<cc1:TimeSelector ID="TimeSelector6" runat="server" DisplayButtons="false">
</cc1:TimeSelector>
Twenty Four Hour Format
This can be done by setting the property SelectedTimeFormatto TwentyFour, this changes the Time Format to 24 hour clock in the TimePicker.
By default SelectedTimeFormat property is Twelve.
<cc1:TimeSelector ID="TimeSelector7" runat="server" SelectedTimeFormat="TwentyFour"></cc1:TimeSelector>
Allow Editing of Seconds
By default Seconds part of the Time cannot be edited or changed, but in case you need to change that you need to set the property AllowSecondEditing to true.
By default AllowSecondEditing property is false.
<cc1:TimeSelector ID="TimeSelector10" runat="server" AllowSecondEditing="true">
</cc1:TimeSelector>
Setting Time Value in TimePicker from Code Behind
The following explains how we can set Time in the TimePicker control. You can either set it directly using the SetTime method. I have explained how we can extract the Time Parameters from a DateTime object and then set it as Time in the TimePicker control.
<cc1:TimeSelector ID="TimeSelector9" runat="server">
</cc1:TimeSelector>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DateTime dt = DateTime.Parse("12:35 PM");
MKB.TimePicker.TimeSelector.AmPmSpec am_pm;
if (dt.ToString("tt") == "AM")
{
am_pm = MKB.TimePicker.TimeSelector.AmPmSpec.AM;
}
else
{
am_pm = MKB.TimePicker.TimeSelector.AmPmSpec.PM;
}
TimeSelector9.SetTime(dt.Hour, dt.Minute, am_pm);
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DateTime = DateTime.Parse("12:35 PM")
Dim am_pm As MKB.TimePicker.TimeSelector.AmPmSpec
If dt.ToString("tt") = "AM" Then
am_pm = MKB.TimePicker.TimeSelector.AmPmSpec.AM
Else
am_pm = MKB.TimePicker.TimeSelector.AmPmSpec.PM
End If
TimeSelector9.SetTime(dt.Hour, dt.Minute, am_pm)
End If
End Sub
Fetching Time Value from TimePicker on PostBack
In the below code, I am have explained how we can extract the Time parameters of the Selected Time from the TimePicker control on PostBack and convert it into DateTime Object.
<cc1:TimeSelector ID="TimeSelector8" runat="server" AllowSecondEditing="true">
</cc1:TimeSelector>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
C#
protected void Submit(object sender, EventArgs e)
{
DateTime time = DateTime.Parse(string.Format("{0}:{1}:{2} {3}", TimeSelector8.Hour, TimeSelector8.Minute, TimeSelector8.Second, TimeSelector8.AmPm));
ClientScript.RegisterStartupScript(this.GetType(), "time", "alert('Selected Time: " + time.ToString("hh:mm:ss tt") + "');", true);
}
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
Dim time As DateTime = DateTime.Parse(String.Format("{0}:{1}:{2} {3}", TimeSelector8.Hour, TimeSelector8.Minute, TimeSelector8.Second, TimeSelector8.AmPm))
ClientScript.RegisterStartupScript(Me.[GetType](), "time", "alert('Selected Time: " + time.ToString("hh:mm:ss tt") + "');", True)
End Sub
Demo
Downloads
