DatePicker - First Look

RadDatePicker

RadDatePicker
RadDatePicker
Open the calendar popup.
  • select
  • select
  • select
Isolate this demo as a stand-alone application

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.
<%@ 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 runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="containerDiv" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-thin" runat="server" id="containerDiv">

        <h2 class="qsfSubtitle">RadDatePicker</h2>
        <telerik:RadDatePicker ID="RadDatePicker1" Skin="Default" Width="100%" runat="server">
        </telerik:RadDatePicker>
    </div>
    <asp:Panel ID="Panel1" runat="server">
        <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Orientation="Vertical"
            Expanded="true">


            <Views>
                <qsf:View Title="Localization">
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn6" runat="server" Size="Wide">
                        <ul class="fb-group">
                            <li>
                                <qsf:ComboBox ID="rcbCulture" runat="server" AllowCustomText="false" Label="Culture" AutoPostBack="true" Size="Medium">
                                    <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>
                                </qsf:ComboBox>
                            </li>

                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
                <qsf:View Title="Date Settings">
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                        <ul class="fb-group">
                            <li>
                                <qsf:DatePicker ID="rdpMinDate" runat="server" Label="MinDate" AutoPostBack="true"
                                    DateInput-EmptyMessage="MinDate" MinDate="01/01/1000" MaxDate="01/01/3000" Size="Medium">
                                </qsf:DatePicker>
                            </li>
                            <li>

                                <qsf:DatePicker ID="rdpMaxDate" runat="server" Size="Medium" Label="MaxDate" AutoPostBack="true"
                                    DateInput-EmptyMessage="MaxDate" MinDate="01/01/1000" MaxDate="01/01/3000">
                                </qsf:DatePicker>
                            </li>
                            <li>

                                <qsf:ComboBox ID="rcbDateFormat" runat="server" Label="DateFormat" AutoPostBack="true" Size="Medium">
                                    <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>
                                </qsf:ComboBox>
                            </li>

                        </ul>
                    </qsf:ConfiguratorColumn>


                </qsf:View>
                <qsf:View Title="Popup Settings">

                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                        <ul class="fb-group">
                            <li>

                                <qsf:ComboBox ID="rcbPopupAnimation" runat="server" AutoPostBack="true" Label="Popup animation" AllowCustomText="false" Size="Medium">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Fade" Value="Fade" Selected="true"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Slide" Value="Slide"></telerik:RadComboBoxItem>
                                    </Items>
                                </qsf:ComboBox>
                            </li>

                            <li>

                                <qsf:ComboBox ID="rcbPopupDirection" Label="Popup direction" AllowCustomText="false" Size="Medium" runat="server" AutoPostBack="true">
                                    <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>
                                </qsf:ComboBox>
                            </li>

                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow">
                        <ul class="fb-group">
                            <li>

                                <qsf:TextBox ID="riTooltip" runat="server" AutoPostBack="true" Label="Tooltip"
                                    Size="Wide">
                                </qsf:TextBox>
                            </li>

                            <li>

                                <qsf:NumericTextBox ID="tbDuration" runat="server" ShowSpinButtons="false" Label="Duration (ms)" AutoPostBack="true"
                                    DataType="System.Int32" Size="Wide">
                                    <NumberFormat AllowRounding="false" DecimalDigits="0"></NumberFormat>
                                </qsf:NumericTextBox>
                            </li>

                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Wide">
                        <ul class="fb-group">

                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox runat="server" ID="chkEnableShadows" Checked="true" Text="Enable shadows"
                                        AutoPostBack="True" OnCheckedChanged="chkEnableShadows_CheckedChanged"></asp:CheckBox></span>
                            </li>
                            <li>
                                <span class="checkbox size-wide">
                                    <asp:CheckBox ID="chkShowButton" runat="server" Checked="true" AutoPostBack="true"
                                        Text="Show date popup button"></asp:CheckBox></span>
                            </li>
                            <li>
                                <span class="checkbox size-wide">
                                    <asp:CheckBox ID="chkShowPopupOnFocus" runat="server" Checked="true" AutoPostBack="true"
                                        Text="Show popup on textbox focus"></asp:CheckBox></span>
                            </li>
                            <li>
                                <span class="checkbox size-wide">
                                    <asp:CheckBox ID="chkEnableScreenBoundaryDetection" runat="server" Checked="true"
                                        AutoPostBack="true" Text="Enable screen boundary detection"></asp:CheckBox></span>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
    </asp:Panel>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?