New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    WebForms TimePicker Overview

    This demo illustrates the RadTimePicker for ASP.NET AJAX control.

    About RadTimePicker for ASP.NET AJAX

    RadTimePicker control is a highly configurable component for displaying and selecting time values. The time picker facilitates the interaction between the user and your web site and saves you a lot of client-side scripting. Features include adjacent time list preview, share timeviews context menus, a set of built-in skins and many more.

    RadTimePicker and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

    Key Features

    • Flexible client-side API
    • Shared TimeViews
    • Keyboard navigation.
    • Visual Appeal - ships with rich set of skins for easy and consistent styling.

    More about RadTimePicker for ASP.NET AJAX
    • DefaultVB.aspx
    • styles.css
    <%@ Page  Language="vb" AutoEventWireup="true"  %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
           <script>
               function convertToRome(value) {
                   var rome = new Array("", "", "", "III", "", "", "VI", "", "", "IX", "", "", "XII");
                   if (0 <= value <= 12) {
                       return rome[value];
                   }
               }
               function test(sender) {
                   var selectedTime = sender.get_value();
                   var value = selectedTime.split(":");
                   var hours = value[0];
                   var minutes = value[1];
                   var gauge1 = $find("<%=RadRadialGauge1.ClientID %>").get_kendoWidget();
     
                    gauge1.options.pointer[0].value = hours;
                    gauge1.options.pointer[1].value = parseInt(minutes) / 5;
                    gauge1.redraw()
     
                    setGaugeTime($find("<%=RadRadialGauge2.ClientID %>").get_kendoWidget(), 5, hours, minutes);
                    setGaugeTime($find("<%=RadRadialGauge3.ClientID %>").get_kendoWidget(), 13, hours, minutes);
                }
     
                function setGaugeTime(gauge, diff, hours, minutes) {
                    if ((parseInt(hours) + diff) > 12) {
                        gauge.options.pointer[0].value = (parseInt(hours) + diff - 12);
                        gauge.options.pointer[1].value = parseInt(minutes) / 5;
                    }
                    else {
                        gauge.options.pointer[0].value = parseInt(hours) + diff;
                        gauge.options.pointer[1].value = parseInt(minutes) / 5;
                    }
     
                    gauge.redraw();
                }
     
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTimePicker1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadTimePicker1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <div class="demo-container size-thin" runat="server" id="containerDiv">
            <div class="header">
                <h3>Set New Time for NewYork:</h3>
                <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" Width="285px" DateInput-OnClientDateChanged="test" runat="server"></telerik:RadTimePicker>
            </div>
            <div class="cellsWrapper">
                <div class="demo-cell">
                    <div class="backgroundNewYork">
                        <div class="backgroundHolder">
                            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="150px" Width="150px">
                                <Pointers>
                                    <telerik:RadialPointer Value="5">
                                        <Cap Color="#ffffff" Size="0.25" />
                                    </telerik:RadialPointer>
                                    <telerik:RadialPointer Value="8" Color="#778890">
                                        <Cap Size="0.08" />
                                    </telerik:RadialPointer>
                                </Pointers>
                                <Scale Min="0" Max="12" MajorUnit="1" MinorUnit="0.2" StartAngle="-270" EndAngle="90">
                                    <Labels Format="{0}" Position="Inside" Template="#=convertToRome(value)#" Font="bold 12px Arial,Segoe UI,Verdana,Tahoma" />
                                    <MajorTicks Size="15" />
                                    <MinorTicks Size="5" />
                                </Scale>
                            </telerik:RadRadialGauge>
                        </div>
     
                    </div>
                </div>
                <div class="demo-cell">
                    <div class="backgroundLondon">
                        <div class="backgroundHolder">
                            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge2" Height="150px" Width="150px">
                                <Pointers>
                                    <telerik:RadialPointer Value="7">
                                        <Cap Color="#ffffff" Size="0.25" />
                                    </telerik:RadialPointer>
                                    <telerik:RadialPointer Value="5" Color="#778890">
                                        <Cap Size="0.1" />
                                    </telerik:RadialPointer>
                                </Pointers>
                                <Scale Min="0" Max="12" MajorUnit="1" MinorUnit="0.2" StartAngle="-270" EndAngle="90">
                                    <Labels Format="{0}" Position="Inside" Template="#=convertToRome(value)#" Font="bold 12px Arial,Segoe UI,Verdana,Tahoma" />
                                    <MajorTicks Size="15" />
                                    <MinorTicks Size="5" />
                                </Scale>
                            </telerik:RadRadialGauge>
                        </div>
                    </div>
                </div>
                <div class="demo-cell">
                    <div class="backgroundTokyo">
                        <div class="backgroundHolder">
                            <telerik:RadRadialGauge runat="server" ID="RadRadialGauge3" Height="150px" Width="150px">
                                <Pointers>
                                    <telerik:RadialPointer Value="10">
                                        <Cap Color="#ffffff" Size="0.25" />
                                    </telerik:RadialPointer>
                                    <telerik:RadialPointer Value="5" Color="#778890">
                                        <Cap Size="0.1" />
                                    </telerik:RadialPointer>
                                </Pointers>
                                <Scale Min="0" Max="12" MajorUnit="1" MinorUnit="0.2" StartAngle="-270" EndAngle="90">
                                    <Labels Format="{0}" Position="Inside" Template="#=convertToRome(value)#" Font="bold 12px Arial,Segoe UI,Verdana,Tahoma" />
                                    <MajorTicks Size="15" />
                                    <MinorTicks Size="5" />
                                </Scale>
                            </telerik:RadRadialGauge>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance