Click here to Skip to main content
15,434,673 members
Articles / Web Development / ASP.NET
Posted 19 Jun 2011


37 bookmarked

Time Picker Ajax Extender Control

Rate me:
Please Sign up or sign in to vote.
4.67/5 (25 votes)
22 Jun 2011CPOL4 min read
Time Picker Ajax Extender Control



The Time Picker is an Ajax Extender Control which can be used to input time. It tries to fill the gap of such extender not available under the Ajax Control Toolkit.

Extender controls can be used to enhance the client functionality of ASP.NET Web server controls. You do not use extender controls by themselves. Instead, you attach them to another ASP.NET Web server control. Extender controls are attached to a Web server control by setting the TargetControlID property of the extender control to the ID of the server control being extended.

The library download includes:

  • Help File
  • Binaries
  • Source with Demo Application

This article contains source and binaries for both Framework 2.0 and Framework 3.5.


While working for a project, I came across a need to have users enter time the way they can choose a date from the Calendar Control. Being aware of the fact that Microsoft does not provides any such control out of the box, I started looking out for other options. There were some good solutions available but most of them were using client scripting (Jquery/JavaScript).

This is when I stumbled upon these two articles:

Since I have very little experience on ASP.NET, I decided to take it as a learning opportunity to build on such a control, based on the above two examples.
My objective was to build a control that must be simple to use/configure, provide useful feature set and should be similar to the Ajax Control Toolkit Calendar control.

Using the Code

To use the control:

  1. Add a reference to the control assembly Ajaxified.dll. Also add the assembly to the toolbox. The TimePicker control will be added to the toolbox.
  2. Add a textbox control that you need to extend to behave as a Time Picker. Drag the TimePicker control from the toolbox. It will add the following page directive and the control on the page.
<%@ Register TagPrefix="Ajaxified" Assembly="Ajaxified" Namespace="Ajaxified" %>

The final markup will be:

<asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
<Ajaxified:TimePicker ID="TimePicker1" runat="server" TargetControlID="TextBox1">

The Time Picker control exposes the following properties:

Property NameTypeComments
CloseOnSelection booleanSpecify whether the pop should automatically close when a specific time is selected. The default is false.
MinuteStepInt32Specify the minute interval between two values. The default value is 15 min.
OnClientShowingstringClient event when the popup starts to open.
OnClientShownstringClient event when the popup has opened completely.
OnClientHiding stringClient event when the popup starts to close.
OnClientHiddenstringClient event when the popup is completely closed.
OnClientSelectionChangedstringClient event when the time selection is done.
CssClassstringThe Css class Name for the control.
HeaderCssClassstringThe Css class Name for the header part.
TitleCssClassstringThe Css class Name for the title text.
TabCssClassstringThe Css class Name for the am/pm tab.
ItemCssClassstringThe Css class Name for the item cell.
SelectedItemCssClassstringThe Css class Name for the item cell that is selected.
SelectedTabCssClassstringThe Css class Name for the tab that is selected.

The markup illustrating the use of these properties:

<asp:TextBox ID="TextBox2" runat="server" Text=""></asp:TextBox>
<Ajaxified:TimePicker runat="server" TargetControlID="TextBox2" 

and to handle the events:

<script language="javascript" type="text/javascript">
    function clientShowing(sender) {
        //sender is reference to the timepicker object
    function clientShown(sender) {
        //sender is reference to the timepicker object
    function clientHiding(sender) {
        //sender is reference to the timepicker object
    function clientHidden(sender) {
        //sender is reference to the timepicker object
    function selectionChanged(sender) {


The basic layout of the control is defined as illustrated in the image below:


Each section has a CssName property attached to it to handle all the styling needs for the control. If the user does not assign these properties, the control renders with default style as shown in the introductory image. It is advisable to play only with the color and font schemes to maintain the layout consistency. The demo application contains a Style Sheet to illustrate how to override the default style for the control.

Section NameCSS Property Name
CssClassWhole Control
TitleCssClassTitle Text
TabCssClassAM/PM tab
ItemCssClassItem Cell
SelectedItemCssClassSelected Item Cell
SelectedTabCssClassSelected Tab


The control is also capable of basic input validation.


If the user keys in invalid time format, the control will provide a visual cue that something is wrong as shown in the image above.

Points of Interest

This exercise has been of great value to me, especially when it came to client side scripting. The most important thing I came to learn was how to use JavaScript in an object oriented way. There were however minor hiccups when trying out in various browsers.

I have tested the component on IE8, Firefox 4 and Chrome. There is an issue in the layout when used in IE7.0 but the whole idea of this exercise was creating an extender control rather than learning about cross browser issues. So I left it out there.


Appreciations for these authors for providing such nice examples.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior) Schneider Electric, GTCI Bangalore
India India
Music is my passion,
Apart from programming I like to read a lot.

Comments and Discussions

QuestionAnyone updated this? Pin
Don Solo22-Jan-19 4:12
MemberDon Solo22-Jan-19 4:12 
QuestionUpdated to work with .NET 4.0? Pin
Zyxy14-Aug-18 8:04
MemberZyxy14-Aug-18 8:04 
QuestionAbout the time picker Pin
Member 1216612525-Nov-15 19:49
MemberMember 1216612525-Nov-15 19:49 
QuestionTimepicker in UserControl Pin
CarolV20-Oct-15 8:03
MemberCarolV20-Oct-15 8:03 
QuestionSystem.Security.VerificationException: Operation could destabilize the runtime. Pin
wrappingduke23-Sep-15 13:22
Memberwrappingduke23-Sep-15 13:22 
QuestionPost back issue Pin
Member 448369116-Nov-14 23:12
MemberMember 448369116-Nov-14 23:12 
QuestionTime Picker Button Pin
Archana yalagi14-May-14 2:27
MemberArchana yalagi14-May-14 2:27 
GeneralMy vote of 5 Pin
raj ch6-Aug-13 2:01
Memberraj ch6-Aug-13 2:01 
Questionnot working in internet explorer Pin
abhishekagrwl2526-Jul-13 20:15
professionalabhishekagrwl2526-Jul-13 20:15 
m using timepicker...its working in opera bt not woprking in internet explorer
QuestionTime Picker Pin
ajkcs0525-Jul-13 4:05
Memberajkcs0525-Jul-13 4:05 
Questionnot passing value to my txtbox Pin
Gavmc19-Apr-13 6:07
MemberGavmc19-Apr-13 6:07 
AnswerRe: not passing value to my txtbox Pin
jaquinom26-Apr-13 8:35
Memberjaquinom26-Apr-13 8:35 
Questioncan we hide the mage of timepicker Pin
nrane319-Feb-13 1:52
Membernrane319-Feb-13 1:52 
Questionnot working with modalpopupextender? Pin
Jennette2-Aug-12 8:28
MemberJennette2-Aug-12 8:28 
AnswerRe: not working with modalpopupextender? Pin
Member 1020722613-Aug-13 5:46
MemberMember 1020722613-Aug-13 5:46 
QuestionMy vote of 5 Pin
hamed136155427-Apr-12 23:04
Memberhamed136155427-Apr-12 23:04 
QuestionMicrosoft JScript runtime error: Sys.ArgumentOutOfRangeException: Value must be an integer Pin
JSLSoftware25-Apr-12 6:33
MemberJSLSoftware25-Apr-12 6:33 
AnswerRe: Microsoft JScript runtime error: Sys.ArgumentOutOfRangeException: Value must be an integer Pin
JSLSoftware25-Apr-12 7:51
MemberJSLSoftware25-Apr-12 7:51 
GeneralRe: Microsoft JScript runtime error: Sys.ArgumentOutOfRangeException: Value must be an integer Pin
slucas10-Mar-13 7:05
Memberslucas10-Mar-13 7:05 
GeneralRe: Microsoft JScript runtime error: Sys.ArgumentOutOfRangeException: Value must be an integer Pin
mikramuddin16-Dec-14 11:06
Membermikramuddin16-Dec-14 11:06 
QuestionVery Nice Pin
Member 287297822-Feb-12 3:50
MemberMember 287297822-Feb-12 3:50 
QuestionNot compatible with ASP 4.0? Pin
kaempf8430-Aug-11 6:50
Memberkaempf8430-Aug-11 6:50 
AnswerRe: Not compatible with ASP 4.0? Pin
Member 853761423-Jan-12 15:17
MemberMember 853761423-Jan-12 15:17 
GeneralRe: Not compatible with ASP 4.0? Pin
Zyxy14-Aug-18 7:58
MemberZyxy14-Aug-18 7:58 
QuestionError loading assembly Pin
Smcdonald12-Jul-11 4:23
MemberSmcdonald12-Jul-11 4:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.