Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Calendar / DatePicker/First look

Example Configuration

RadDatePicker




  • The following example shows the properties that RadDatePicker exposes for customizing its user interface.

    • MinDate, MaxDate - the control will not accept dates beyond the specified range (the default one is Jan 1, 1980 - Dec 31, 2099)
    • EnableShadows - true by default. The calendar component will appear with shadow effect.
    • DatePopupButton - if the button is not visible, the Calendar popup can be opened programmatically with Javascript, or by setting ShowPopupOnFocus="true"
    • DatePopupButtonTooltip - the default value is "Open the calendar popup."
    • ShowPopupOnFocus - false by default. The textbox can be focused with the mouse or the keyboard. This functionality may not be very usable for users, which prefer entering dates manually and using the up/down arrow keys to modify the date value
    • PopupDirection - the default is BottomRight.
    • EnableScreenBoundaryDetection - true by default. The control's popup can appear on various sides, regardless of the PopupDirection property value, so that the popup is not displayed beyond the page edge.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Functionality.CustomDatePicker.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
        <style type="text/css">
            #ConfigurationPanel1 ul
            {
                list-style: none;
                margin: 1em 0 0.6em;
                padding: 0;
            }
            #ConfigurationPanel1 li
            {
                margin: 0;
                padding: 5px 0 10px;
            }
            #ConfigurationPanel1 li input[type="checkbox"]
            {
                vertical-align: middle;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="CS"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="None" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" />
        <telerik:RadAjaxManager runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
               
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:Panel ID="Panel1" runat="server">
            <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Orientation="Vertical">
                <ul>
                    <li>MinDate
                        <telerik:RadDatePicker ID="rdpMinDate" runat="server" Width="140px" AutoPostBack="true"
                            DateInput-EmptyMessage="MinDate" MinDate="01/01/1000" MaxDate="01/01/3000">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="rcToday" />
                                </SpecialDays>
                            </Calendar>
                        </telerik:RadDatePicker>
                    </li>
                    <li>MaxDate
                        <telerik:RadDatePicker ID="rdpMaxDate" runat="server" Width="140px" AutoPostBack="true"
                            DateInput-EmptyMessage="MaxDate" MinDate="01/01/1000" MaxDate="01/01/3000">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="rcToday" />
                                </SpecialDays>
                            </Calendar>
                        </telerik:RadDatePicker>
                    </li>
                    <li>dateinput format
                        <telerik:RadComboBox ID="rcbDateFormat" runat="server" AutoPostBack="true" Width="100px">
                            <Items>
                                <telerik:RadComboBoxItem Text="d" Value="d" Selected="true" />
                                <telerik:RadComboBoxItem Text="D" Value="D" Selected="true" />
                                <telerik:RadComboBoxItem Text="dd/MMM/yyyy" Value="dd/MMM/yyyy" />
                                <telerik:RadComboBoxItem Text="dd/MMM/yy" Value="dd/MMM/yy" />
                            </Items>
                        </telerik:RadComboBox>
                    </li>
                    <li>culture
                        <telerik:RadComboBox ID="rcbCulture" runat="server" AutoPostBack="true" Width="153px">
                            <Items>
                                <telerik:RadComboBoxItem Value="en-US" Text="English"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="de-DE" Text="German"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="fr-FR" Text="French"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="af-ZA" Text="Afrikaans - South Africa"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="sq-AL" Text="Albanian - Albania"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="hy-AM" Text="Armenian - Armenia"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="be-BY" Text="Belarusian - Belarus"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="bg-BG" Text="Bulgarian - Bulgaria"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="ca-ES" Text="Catalan - Catalan"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="hr-HR" Text="Croatian - Croatia"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="cs-CZ" Text="Czech - Czech Republic"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="da-DK" Text="Danish - Denmark"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="nl-BE" Text="Dutch - Belgium"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="nl-NL" Text="Dutch - The Netherlands"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="en-AU" Text="English - Australia"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="en-CA" Text="English - Canada"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="fr-FR" Text="French - France"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="hu-HU" Text="Hungarian - Hungary"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="ro-RO" Text="Romanian - Romania"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="sw-KE" Text="Swahili - Kenya"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="sv-FI" Text="Swedish - Finland"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="sv-SE" Text="Swedish - Sweden"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Value="tt-RU" Text="Tatar - Russia"></telerik:RadComboBoxItem>
                            </Items>
                        </telerik:RadComboBox>
                    </li>
                    <li>
    <asp:CheckBox runat="server" ID="chkEnableShadows" Checked="true" Text="Enable shadows"
    AutoPostBack="True" OnCheckedChanged="chkEnableShadows_CheckedChanged"></asp:CheckBox>
                      <br />
    <asp:CheckBox ID="chkShowButton" runat="server" Checked="true" AutoPostBack="true"
    Text="show date popup button"/></li>
                    <li>
                        <telerik:RadTextBox ID="riTooltip" runat="server" AutoPostBack="true" Label="tooltip"
                            Width="190px" /></li>
                    <li>
    <asp:CheckBox ID="chkShowPopupOnFocus" runat="server" Checked="true" AutoPostBack="true"
    Text="show popup on textbox focus" /></li>
                    <li>popup direction
                        <telerik:RadComboBox ID="rcbPopupDirection" runat="server" AutoPostBack="true" Width="100px">
                            <Items>
                                <telerik:RadComboBoxItem Text="top left" Value="11" />
                                <telerik:RadComboBoxItem Text="top right" Value="12" />
                                <telerik:RadComboBoxItem Text="bottom left" Value="21" />
                                <telerik:RadComboBoxItem Text="bottom right" Value="22" Selected="true" />
                            </Items>
                        </telerik:RadComboBox>
                    </li>
                    <li>
    <asp:CheckBox ID="chkEnableScreenBoundaryDetection" runat="server" Checked="true"
    AutoPostBack="true" Text="enable screen boundary detection" /></li>
                            
                    <li>
                        popup animation
                        <telerik:RadComboBox ID="rcbPopupAnimation" runat="server" AutoPostBack="true" Width="100px">
                            <Items>
                                <telerik:RadComboBoxItem Text="Fade" Value="Fade" />
                                <telerik:RadComboBoxItem Text="Slide" Value="Slide" />
                            </Items>
                        </telerik:RadComboBox>
                    </li>
                    <li>
                        duration (ms)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <telerik:RadNumericTextBox ID="tbDuration" runat="server" AutoPostBack="true" Width="100px"
                            DataType="System.Int32">
                            <NumberFormat AllowRounding="false" DecimalDigits="0" />
                        </telerik:RadNumericTextBox>
                    </li>
                </ul>
            </qsf:ConfiguratorPanel>
        </asp:Panel>
        <h3 class="qsfSubtitle">
            RadDatePicker</h3>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" ZIndex="30001" />
        <div style="clear: both">
            <!-- -->
        </div>
        <br />
        <br />
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451