Click here to Skip to main content
12,952,398 members (43,563 online)
Click here to Skip to main content
Add your own
alternative version


14 bookmarked
Posted 20 Feb 2012

ASP.NET 4.0 TimePicker User Control

, 25 Feb 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Time Picker Extender User Control for ASP.NET Framework 4

Download - 1.23 MB



This project is tested only on IE9, ASP.NET 4.0. The Time Picker User Control was developed exclusively for an Intranet site so cross-browser compatibility was not required. The User Control is written VB.NET.

This article shows how to create and add a custom Ajax Time Picker Extender User Control to an ASP.NET application. I didn't have the time to write a Ajax TimeExtender so I decided on using the Ajax Popup Extender and Datalist controls to quickly create a reusable Time Picker. I based the User Control style on the article by Farhan Ejaz that was incompatible with my ASP.NET 4.0 web application. I got the idea of building the Time Picker using an existing Ajax Control from the article by rperetz.


I needed a quick Time Picker control as I began to upgrade existing projects to Dotnet 4.0 and finding my existing control was not compatible with Framework 4.0. I was surprised to find out that the existing Ajax Control Tool Kit did not include a Time Picker Control. Searching the internet didn't turn up any satisfactory Time Pickers so I decided to write a quick custom user control. Unfortunately, namespaces do not play nice with adding User Controls so an edit to the Inherits line has to made each time the control is added. There are some good articles that explain how to convert a User Control into a Server Control but I didn't have time to investigate this option.

Using the code

Download the project file from the link at the top of this article. Open the project only if you have already installed Visual Studio 2010 or above. The project is self contained with all the needed files and images to run the demo.

Remember to change the Inherits line in the ascx page to the root namespace of your project if adding just the User Control to an existing project.

Adding Time Picker Control to Parent Page

  1. Copy the User Control Directory to the Web Project.
  2. Edit the Inherits line in the aspx page of the User Control to point to your projects root namespace. This is usually the name of your VB.NET project.
  3. Compile the project.
  4. Add the code to register the User control on the parent page.
  5. Drag the Ajax Script Manager control and Update Panel onto the parent page.
  6. Add a Textbox to the parent page.
  7. Add the Time Picker Extended control using the tag prefix. Intellisense should show the control if it was added correctly to the project.
  8. Set the Time Picker's TargetControlID to the Textbox ID.
  9. Set the properties for the Time Picker control.
  10. Compile and run the project.
<%@ Register Src="CustomControls/TimeExtender.ascx" TagName="TimeExtender" TagPrefix="cc1" %> 

<asp:textbox runat="server" id="txtStartTime" />

<ccl:timeextender runat="server" targetcontrolid="txtStartTime" id="TimeExtender1">

Time Picker Control ASCX Source Code

The User Control main page was created by simply adding an Image Button, PopupControlExtender, and Datalist to the ascx page. The Datalist is populated by a dataview that contains the times. A MinuteInterval property allows the Time Picker to display different time intervals. The ShowAMandPM property allows the TimePicker to show only AM or PM or both. The current time is selected by clicking on the time in the heading. Note that there is no Ajax Script Manager or Update Panel on the ASCX page because the Parent page handles these functions.

<asp:ImageButton ID="ibtnShowPicker" 


    OnClientClick="return false;"


    runat="server" /> 

     <asp:DataList ID="datalistTimes"       







        runat="server" >

            <div class="Datalist_HeaderLeft">      
            <div class="Datalist_HeaderCenter">
            <asp:LinkButton ID="lbtnHeaderTime"


                ToolTip="click to select current time"

                runat="server" />
            <div class="Datalist_HeaderRight">
            <asp:LinkButton ID="lbtnHeaderAM" 




                runat="server" />
            <asp:LinkButton ID="lbtnHeaderPM" 




                runat="server" />
        <asp:LinkButton ID="lbtnTime" 



            CommandArgument='<%# Eval("Time") %>' 

            Text='<%# Eval("Time") %>'


Time Picker Control Code Behind

The code behind populates the Datalist control by adding times to a Dataset and using the Dataset as the Data Source. A Linkbutton control displays the times allowing the click events to be captured. Times are returned to the parent control using the Popup control's comment. A special routine (SetParentControlValue) had to be added to populate the parent control if a time button is displayed. Textboxes and labels are the only controls setup in the code. Additional controls must be added in the code behind in order for them to work with the Time Picker.


Additional Ajax controls can be created in the same way as the Time Picker control from existing Ajax controls. This technique speeds up development but causes extra work when adding custom controls to existing projects. All the files in the custom User Control must be copied to the project and the root namespace must be set to the projects namespace.


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


About the Author

Web Developer
United States United States
Started programming in Business Basic in the 1980's and acquired my AS in Computer Science at that time. Promoted to IS Manager after one year of programming (sink or swim).
Self taught in SMC Basic, Visual Basic, C Shell, perl, ASP, JavaScript,,
Now working as a Network Administrator at a hospital in Northern California.
Fell into a webmaster role when implementing the company's intranet website to support documentation.

You may also be interested in...


Comments and Discussions

QuestionSelect start and end time Pin
Member 125114805-Sep-16 1:12
memberMember 125114805-Sep-16 1:12 
QuestionError while posting back the selected value from the timepicker Pin
Member 1057204921-Jan-15 10:23
memberMember 1057204921-Jan-15 10:23 
QuestionHaving difficulty adding TimePicker to project. What am I doing wrong? Pin
R Desai21-Jan-15 7:44
memberR Desai21-Jan-15 7:44 
QuestionPlease Share C# version of Control! Pin
Member 112278818-Dec-14 2:00
memberMember 112278818-Dec-14 2:00 
QuestionC# project Pin
Member 933680924-Jul-13 13:16
memberMember 933680924-Jul-13 13:16 
QuestionShare C# code please Pin
Chris Haarer4-Mar-13 7:02
memberChris Haarer4-Mar-13 7:02 
QuestionFrom where can I get newer Ajax Control Toolkit? Pin
Harshad.HBK6-Aug-12 22:55
memberHarshad.HBK6-Aug-12 22:55 
AnswerRe: From where can I get newer Ajax Control Toolkit? Pin
afzal.gujrat2-Jan-13 10:33
memberafzal.gujrat2-Jan-13 10:33 
GeneralMy vote of 5 Pin
Prasad_Kulkarni11-Jun-12 1:24
memberPrasad_Kulkarni11-Jun-12 1:24 
GeneralMy vote of 4 Pin
@k@ ?29-Feb-12 4:11
member@k@ ?29-Feb-12 4:11 
QuestionNice Job Pin
Member 287297823-Feb-12 11:37
memberMember 287297823-Feb-12 11:37 
AnswerRe: Nice Job Pin
BrianLaF25-Feb-12 7:24
memberBrianLaF25-Feb-12 7:24 
AnswerRe: Nice Job Pin
jutiyi15-Aug-12 15:48
memberjutiyi15-Aug-12 15:48 
GeneralRe: Nice Job Pin
Member 287297815-Aug-12 16:01
memberMember 287297815-Aug-12 16:01 
GeneralRe: Nice Job Pin
jutiyi15-Aug-12 21:14
memberjutiyi15-Aug-12 21:14 
GeneralMy vote of 1 Pin
Elfman_NE21-Feb-12 9:38
memberElfman_NE21-Feb-12 9:38 
GeneralRe: My vote of 1 Pin
BrianLaF24-Feb-12 20:53
memberBrianLaF24-Feb-12 20:53 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170525.1 | Last Updated 25 Feb 2012
Article Copyright 2012 by BrianLaF
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid