TimePicker - DataBinding

String array
TimeSpan array
DateTime array
Object array with DateTime
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
RadTimePicker and RadDateTimePicker allow displaying custom pre-defined time values. This feature is controlled by the CustomTimeValues property that the TimeView of the time picker exposes. The CustomTimeValues is of type object and accepts: TimeSpan array, String array, DateTime array. You can also bind the TimeView to an Object array with DateTime through the DataList property of the TimeView.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.CustomCollection.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" />
    <div class="demo-containers">
        <div class="demo-container">
            <div class="controls">
                <div class="wrapper">
                    <table>
                        <tr>
                            <td class="halfWidth">
                                <fieldset>
                                    <legend>String array</legend>
                                    <div class="picker">
                                        <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" runat="server">
                                        </telerik:RadTimePicker>
                                    </div>
                                </fieldset>
                            </td>
                            <td class="halfWidth">
                                <fieldset>
                                    <legend>TimeSpan array</legend>
                                    <div class="picker">
                                        <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker2" runat="server">
                                        </telerik:RadTimePicker>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <legend>DateTime array</legend>
                                    <div class="picker">
                                        <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker3" runat="server">
                                        </telerik:RadTimePicker>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <legend>Object array with DateTime</legend>
                                    <div class="picker">
                                        <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker4" runat="server">
                                        </telerik:RadTimePicker>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?