TimePicker - First Look

Demo Configurator

 
  • Interval:10 min
  • Choose format for TimeView and DateInput:t (default)
  • Select popup expand direction:BottomRight(default)

Isolate this demo as a stand-alone application

The RadTimePicker control is used to allow the user to select time and to display that time in the specified format and culture. You can limit the time values that can be selected by setting the StartTime and EndTime properties. The Interval property allows the user to specify the interval between time slots available for selection. Moreover, you can:

  • Customize the display time format for the time input and TimeView popup
  • Choose the number of columns displayed in the TimeView
  • Select popup expand direction and render direction for the TimeView
  • Show the popup when the input field is focused
  • Set custom tooltip for the time popup image, etc.
  • Enable shadow effect for the TimeView component.

If you want to allow the time value to be entered in the input field only (without using the RadTimePicker's popup), there is an option to hide the time popup image by setting the RadTimePickerInstance.TimePopupButton.Visible property.

<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.Overview.DefaultCS" %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <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">

        <h2>Select time:
        </h2>
        <telerik:RadTimePicker ID="RadTimePicker1" Width="100%" runat="server">
        </telerik:RadTimePicker>
    </div>



    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Demo Configurator"
        Expanded="true">
        <Views>
            <qsf:View Title="Date Settings">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">

                    <ul class="fb-group">
                        <li>
                            <qsf:NumericTextBox ID="txtBoxStartTime" Label="Start time:" runat="server" MinValue="0" MaxValue="23"
                                NumberFormat-AllowRounding="false" NumberFormat-KeepNotRoundedValue="true">
                            </qsf:NumericTextBox>
                        </li>

                        <li>
                            <qsf:NumericTextBox ID="txtBoxEndTime" Label="End time:" runat="server" MinValue="0" MaxValue="23"
                                NumberFormat-AllowRounding="false" NumberFormat-KeepNotRoundedValue="true">
                            </qsf:NumericTextBox></li>
                        <li>

                            <qsf:Button ID="btnApplyStartEndTime" AutoPostBack="true" runat="server" Text="Apply start/end time"
                                OnClick="btnApplyStartEndTime_Click">
                            </qsf:Button>

                        </li>

                    </ul>
                    <asp:CompareValidator ID="StartEndTimeCompareValidator" runat="server" ControlToValidate="txtBoxEndTime"
                        ControlToCompare="txtBoxStartTime" Type="Integer" Operator="GreaterThan" ErrorMessage="End time must be greater than start time"></asp:CompareValidator>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Size="Medium">

                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="ddlTimeInterval" Label="Interval:" runat="server" Size="Medium" AutoPostBack="true"
                                OnSelectedIndexChanged="ddlTimeInterval_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Value="10" Text="10 min"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="15" Text="15 min"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="30" Text="30 min"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="1" Text="60 min(default)"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>

                        </li>
                        <li>
                            <qsf:DropDownList ID="ddlFormat" runat="server" Label="Choose format for TimeView and DateInput:" Size="Medium" AutoPostBack="True" OnSelectedIndexChanged="ddlFormat_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Value="t" Text="t (default)"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="HH:mm" Text="HH:mm"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="HH:mm:ss" Text="HH:mm:ss"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>                     
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Popup Settings">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li><span class="checkbox">
                            <asp:CheckBox runat="server" ID="chkShowHideTimePopUp" Text="Show/hide time popup button"
                                AutoPostBack="True" OnCheckedChanged="chkShowHideTimePopUp_CheckedChanged"></asp:CheckBox></span></li>
                        <li><span class="checkbox">
                            <asp:CheckBox runat="server" ID="chkShowPopUpOnFocus" Text="Show popup on focus"
                                AutoPostBack="True" OnCheckedChanged="chkShowPopUpOnFocus_CheckedChanged"></asp:CheckBox></span></li>
                        <li><span class="checkbox">
                            <asp:CheckBox runat="server" ID="chkEnableShadows" Text="Enable shadows" AutoPostBack="True"
                                OnCheckedChanged="chkEnableShadows_CheckedChanged"></asp:CheckBox></span></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" Label="Select popup expand direction:" ID="ddlPopupDirection" AutoPostBack="True"
                                OnSelectedIndexChanged="ddlPopupDirection_SelectedIndexChanged">
                                <Items>
                                    <telerik:DropDownListItem Value="BottomRight" Text="BottomRight(default)"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BottomLeft" Text="BottomLeft"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopRight" Text="TopRight"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopLeft" Text="TopLeft"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>

                        </li>
                        <li>
                            <qsf:RadioButtonList ID="rblRenderDirection" Labe="Select rendering direction:" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rblRenderDirection_SelectedIndexChanged">
                                <asp:ListItem Value="1">Render in Rows</asp:ListItem>
                                <asp:ListItem Value="2">Render in Columns</asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>


            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?