<%@ 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>
<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>
<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>