How to Set up Timepicker of ASP.NET AJAX Using CSharp

How to Put up Timepicker Using C#

Home > How to > Calendar TimePicker

Kettic Calender UI for ASP.NET AJAX library is designed to provide users the complete calendar composite objects: they are ASP.NET AJAX Calender tool, ASP.NET AJAX DatePicker control, ASP.NET AJAX TimePicker component as well as ASP.NET AJAX DateTime Picker object. And all of these embedded calendar components are customizable.

C# Sample Codes for Setting TimePopupButton

We can set these properties - Visible, ImageUrl, Border, ToolTip, BackColor, etc after we have applied TimePopupButton. And usually, the timepicker consists of two parts: timeview and DateInput. The former means the text box, and the latter is a popup window.


PerTimePicker1.TimePopupButton.Visible = true;
PerTimePicker1.TimePopupButton.Enabled = true;
PerTimePicker1.TimePopupButton.BorderColor = System.Drawing.Color.GreenYellow;
PerTimePicker1.TimePopupButton.BorderWidth = 3;

C# Sample Codes for Setting TimeView


PerTimePicker1.TimeView.TimeFormat = "HH:mm";
PerTimePicker1.TimeView.StartTime = new TimeSpan(1, 0, 0);
PerTimePicker1.TimeView.Interval = new TimeSpan(0, 60, 0);
PerTimePicker1.TimeView.EndTime = new TimeSpan(13, 0, 0);
PerTimePicker1.TimeView.Columns = 4;
PerTimePicker1.TimeView.RenderDirection = RepeatDirection.Horizontal;

We list the detailed attributes of TimeView control:

TimeFormat: et the format of TimeViewer.
StartTime/EndTime: StartTime and EndTime properties are developed to change the range of times displayed.
Interval: use Interval property to adjust the interval between adjacent times in the time view. The valid values are between StartTime and EndTime. For example, if we set the starttime as 9 am, the endtime as 10 am, and the interval as 15 minutes, then the time will be displayed like 9:00, 9:15, 9:30, 9:45, and 10:00.
Columns: property to change the number of columns. If we set the column as 3, then there will be 3 sets of time in each raw.
RenderDirection: use this to adjust the arrangement of time in viewer.

C# Sample Codes for Setting DateInput


PerTimePicker1.DateInput.DateFormat = "HH:mm";
PerTimePicker1.DateInput.DisplayDateFormat = "HH:mm";
PerTimePicker1.DateInput.BorderColor = System.Drawing.Color.SpringGreen;

DateFormat: be used to adjust the format of input time.
DisplayDateFormat: property to display the format of time.
Apprearance: is designed to set the appearance of dateinput, which includes backcolor, textcolor, Border, and so on so forth.

C# Sample Codes for Setting PopupDirection

Use following C# codes adjust Timeview to these four directions: TopLeft, TopRight, BottomLeft and BottomRight.


PerTimePicker1.PopupDirection = DatePickerPopupDirection.BottomLeft;
PerTimePicker1.EnableScreenBoundaryDetection = false;

More Recommended Tutorials

For setting up calendar Timepicker within ASP.NET application, please go to how to set Timepicker using ASP.NET codes.
For setting up calendar Datepicker within ASP.NET project, please go to: ASP.NET codes for setting Datepicker.
For setting up calendar DateTimepicker within C#.NET application, please see C# sample codes for Timepicker.
For setting up calendar MonthYearpicker within C#.NET application, please see C# codes on setting MonthYearpicker.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control

ASP.NET AJAX Calendar UI Control

Overview Getting Started

Calendar element

Title Navigation Controls Column and Row Headers

Pickers

TimePicker DatePicker DateTimePicker MonthYearPicker Using shared Calendar/TimeView Formatting Values

Templates

Calendar Day Templates Calendar Header and Footer Temlates

Features

Customizing the Day Matrix Multi-View Mode Managing Dates Date Selection

Client Prpgramming

Calendar Event

Server Programming