The TimePicker of Kettic UI Calendar for ASP.NET AJAX library can be displayed as a popup that has a header area says "TimePicker" and three drop down columns of times that can be fully user-defined.
TimePopupButton for ASP.NET AJAX
Following is the sample image for setting up a TimePopupButton - is in the right corner of the demo image. After clicking TimePopupButton, we can see the popup window for setting these timepicker properties: Visible, ImageUrl, Border, ToolTip, BackColor, etc.
And usually, the asp.net calendar timepicker consists of two parts: TimeView and DateInput. DateInput is the former text box, and timeview is a popup window after we click TimePopupButton.
TimeView for ASP.NET AJAX
- TimeFormat: time format of TimeViewer.
- StartTime/EndTime: use the StartTime and EndTime properties to change the range of times displayed.
- Interval: set the Interval property to adjust the interval between adjacent times in the time view. The valid values are between StartTime and EndTime. For instance, if we set the start time as 9 am, the endt ime 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: set the 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: the arrangement of time in viewer: vertical or horizontal.
DateInput for ASP.NET AJAX
- DateFormat: can be used to adjust the format of input time.
- DisplayDateFormat: choose this property to display the format of time.
- Apprearance: of course, we are still able to set the appearance of dateinput, which include backcolor, textcolor, Border, and so on so forth.
Position of Popuping Timeview for ASP.NET AJAX
PopupDirection: With the support of this property, users can freely move Timeview to these four directions: TopLeft, TopRight, BottomLeft and BottomRight.
Following demo ASP.NET codes are for setting TimePicker properties. If you want to find more sample C# codes on TimePicker setting
, please go to the related tutorial.
<kettic:PerTimePicker ID="PerTimePicker1" runat="server" PopupDirection="BottomLeft" TimePopupButton-Visible="true"
TimePopupButton-BorderColor="GreenYellow" TimePopupButton-BorderWidth="3" EnableScreenBoundaryDetection="False">
<TimeView ID="TimeView1" runat="server" TimeFormat="HH:mm" StartTime="01:00" EndTime="14:00" Interval="60" Columns="4" RenderDirection="Horizontal"></TimeView>
<DateInput ID="DateInput1" runat="server" DateFormat="HH:mm" DisplayDateFormat="HH:mm" BorderColor="SpringGreen"></DateInput>
Demo time picker image created by using above ASPX codes: