$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
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