Thursday, July 16, 2009

Ajax TimePicker/ClockPicker control


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

Blog link:

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" />
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.