TimePicker - TimeView Templates

 
Open the time view popup.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
The example demonstrates how to use the HeaderTemplate, TimeTemplate, AlternatingTimeTemplate and FooterTemplate properties of the RadTimePicker control in order to customize the look of the control.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.Templates.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" type="text/css" />
</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 type="text/javascript">
            function ClosePopup() {
                var dateTimePicker = $find("<%= RadTimePicker1.ClientID %>");
                dateTimePicker.hideTimePopup();
            }
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-container no-bg" style="max-width: 748px" runat="server" id="containerDiv">
        <div class="mainWrap">
            <div class="pickerWrap">
                <label for="RadTimePicker1_dateInput_text">
                    Start time:</label>
                &nbsp;
            <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" Skin="Metro" runat="server" style="display:inline-block;width:110px;">
                <TimeView runat="server" BorderStyle="None" BackColor="#2a3508" StartTime="09:00:00"
                    EndTime="17:00:10">
                    <HeaderTemplate>
                        <div class="headerTemplate">
                            Time Picker
                        </div>
                    </HeaderTemplate>
                    <TimeTemplate>
                        <div class="itemt">
                            <%# DataBinder.Eval(Container, "DataItem.Time", "{0:hh:mm tt}") %>
                        </div>
                    </TimeTemplate>
                    <AlternatingTimeTemplate>
                        <div class="itemt">
                            <%# DataBinder.Eval(Container, "DataItem.Time", "{0:hh:mm tt}") %>
                        </div>
                    </AlternatingTimeTemplate>
                    <FooterTemplate>
                        <div class="footerTemplate">
                            <button onclick="javascript:ClosePopup();return false;">
                                Close</button>
                        </div>
                    </FooterTemplate>
                </TimeView>
                <DateInput BackColor="#89980c">
                </DateInput>
                <TimePopupButton HoverImageUrl="images/clockHover.gif" ImageUrl="images/clock.gif"></TimePopupButton>
            </telerik:RadTimePicker>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?