Calendar

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

DatePicker - First Look

Example Configuration
  • RadDatePicker
    RadDatePicker
    Open the calendar popup.
  • RadDatePicker
    RadDatePicker
    Open the calendar popup.
  • select
  • select

  • select
  • select

RadDatePicker

RadDatePicker
RadDatePicker
Open the calendar popup.

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.
C# VB
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" %>
<!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>
    <title>ASP.NET Calendar Demo - First Look</title>
    <link href="DemoStyles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="None">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel2">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:Panel ID="Panel1" runat="server">
        <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Orientation="Vertical"
            Expanded="true">
            <ul>
                <li>
                    <label for="rdpMinDate">
                        MinDate</label>
                    <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">
                                </telerik:RadCalendarDay>
                            </SpecialDays>
                        </Calendar>
                    </telerik:RadDatePicker>
                </li>
                <li>
                    <label for="rdpMaxDate">
                        MaxDate</label>
                    <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">
                                </telerik:RadCalendarDay>
                            </SpecialDays>
                        </Calendar>
                    </telerik:RadDatePicker>
                </li>
                <li>
                    <label for="rcbDateFormat">
                        DateInput format</label>
                    <telerik:RadComboBox ID="rcbDateFormat" runat="server" AutoPostBack="true" Width="100px">
                        <Items>
                            <telerik:RadComboBoxItem Text="d" Value="d" Selected="true"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="D" Value="D" Selected="true"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="dd/MMM/yyyy" Value="dd/MMM/yyyy"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="dd/MMM/yy" Value="dd/MMM/yy"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label for="rcbCulture">
                        Culture</label>
                    <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"></asp:CheckBox></li>
                <li>
                    <telerik:RadTextBox ID="riTooltip" runat="server" AutoPostBack="true" Label="Tooltip"
                        Width="190px">
                    </telerik:RadTextBox></li>
                <li>
                    <asp:CheckBox ID="chkShowPopupOnFocus" runat="server" Checked="true" AutoPostBack="true"
                        Text="Show popup on textbox focus"></asp:CheckBox></li>
                <li>
                    <label for="rcbPopupDirection">
                        Popup direction</label>
                    <telerik:RadComboBox ID="rcbPopupDirection" runat="server" AutoPostBack="true" Width="100px">
                        <Items>
                            <telerik:RadComboBoxItem Text="top left" Value="11"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="top right" Value="12"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="bottom left" Value="21"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="bottom right" Value="22" Selected="true"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <asp:CheckBox ID="chkEnableScreenBoundaryDetection" runat="server" Checked="true"
                        AutoPostBack="true" Text="Enable screen boundary detection"></asp:CheckBox></li>
                <li>
                    <label for="rcbPopupAnimation">
                        Popup animation</label>
                    <telerik:RadComboBox ID="rcbPopupAnimation" runat="server" AutoPostBack="true" Width="100px">
                        <Items>
                            <telerik:RadComboBoxItem Text="Fade" Value="Fade"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Slide" Value="Slide"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </li>
                <li>
                    <label for="tbDuration">
                        Duration (ms)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <telerik:RadNumericTextBox ID="tbDuration" runat="server" AutoPostBack="true" Width="100px"
                        DataType="System.Int32">
                        <NumberFormat AllowRounding="false" DecimalDigits="0"></NumberFormat>
                    </telerik:RadNumericTextBox>
                </li>
            </ul>
        </qsf:ConfiguratorPanel>
    </asp:Panel>
    <h3 class="qsfSubtitle">
        RadDatePicker</h3>
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    </telerik:RadDatePicker>
    <br class="qsf-clear-float" />
    </form>
</body>
</html>