Thursday, July 16, 2009

Ajax TimePicker/ClockPicker control

Hi,

Last time I made a Custom DropDown. Please check the following image about this Ajax control.


Blog link: http://vincexu.blogspot.com/2009/06/about-ajaxcontroltoolkit-combobox.html

It introduces how to build a DropDown/ComboBox by Asp.Net Ajax ScriptControl. You can download this control in above link.


I made a TimePicker/ClockPicker this time, hope it can help you. See the following image about this ajax TimePicker.



You can drag the hour/minute pointer to select a time. It supports 12h and 24h format.

You can download from:


(PainControls contain dropdown and timepicker so far)


If you'd like to use this ajax control, please check the below:


1.Add the reference PainControls.dll, and check the sample code as below.


<asp:TextBox ID="TextBox1" Text="" runat="server"></asp:TextBox> <Pain:TimePicker runat="server" ID="t1" TargetControlID="TextBox1" TimeType="H24" />
Properties:
TargetControl: which TextBox(only TextBox) is bound on TimePicker
TimeType: H24/H12 -- Time format
ErrorPrensentControlID: the control can display the time validation information. You can assign it as some span or label to bind on it.
And there are several client Events you can use:
OnClientShowing : client showing event
OnClientShown : client shown event
OnClientHiding: client hiding event
OnClientHidden: client hidden event
OnClientHourSelectionChanged: it triggers when you select new hour value by mouse. It will trigger when mouse up.
OnClientMinuteSelectionChanged: it triggers when you select new minute value by mouse. It will trigger when mouse up.
2. You need use FrameWork 3.5 sp1 to support this control. (You can recompile the files if you want to use in FrameWork 2.0)
3. Don't forget adding a ScriptManager control in the page.
4. If you want to set a default Time for TimePicker, please set a default value in TextBox. It will reset the time according to the value of TextBox bound.

7 comments:

Anonymous said...

Thank U for sharing...
___________________

Vince

Your movies on demand

Anonymous said...

I have been in search of such interesting Articles, I am on a holiday its good to see that everyone are trying their best to keep up

the Spirit by having such great articles posted.

Cheers, Keep it up.

___________________
Vince
Online Marketing of your brand

Maxi Ng said...

This is great!
I am trying to do the same thing.
But not playing to do dragging pointers.
It is great if I know how to make ajax extender just like ajaxtoolkit.
Thank you, great article.

Maxi Ng said...

Oh, btw, what is the catch?
I mean can I use it in my business website?

Vince Xu said...

Hi Maxi,
Due to the code is open source without any licence, you can use it in your business or non-business web site. Enjoy.

Unknown said...

Hi Vince,

This is really going smooth.

Nice job.

Thanks.

dkemper said...

Debugging my website and getting a bunch of exceptions as shown. Everything is back to normal after removing PainControls.dll from the references. Not sure what the problem is, but I would like to be able to use the time control.

DLL and [HttpException (0x80004005): Could not load file or assembly 'PainControls, Version=1.0.3949.26704, Culture=neutral, PublicKeyToken=null' or one of its dependencies. PolicyException thrown. (Exception from HRESULT: 0x80131416)]
System.Web.Compilation.BuildManager.ReportTopLevelCompilationException() +76
System.Web.Compilation.BuildManager.EnsureTopLevelFilesCompiled() +1012
System.Web.Hosting.HostingEnvironment.Initialize(ApplicationManager appManager, IApplicationHost appHost, IConfigMapPathFactory configMapPathFactory, HostingEnvironmentParameters hostingParameters) +1025

[HttpException (0x80004005): Could not load file or assembly 'PainControls, Version=1.0.3949.26704, Culture=neutral, PublicKeyToken=null' or one of its dependencies. PolicyException thrown. (Exception from HRESULT: 0x80131416)]
System.Web.HttpRuntime.FirstRequestInit(HttpContext context) +11305670
System.Web.HttpRuntime.EnsureFirstRequestInit(HttpContext context) +88
System.Web.HttpRuntime.ProcessRequestNotificationPrivate(IIS7WorkerRequest wr, HttpContext context) +4342340