RadTimePicker - Telerik ASP.NET TimePicker

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 90+ 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
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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 Time for New York:</h3>
            <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" Width="285px" DateInput-OnClientDateChanged="test" runat="server"></telerik:RadTimePicker>
        </div>
        <div class="cellsWrapper">
            <div class="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="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="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

Help Us Improve

Was this example helpful?