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 / Client-side API

Select date:      
Popup


DatePicker PopupButton popup above:


Select Min/MaxDate for the RadDatePicker:



MinDate:
MaxDate:
Event Logger









  • RadDatePicker exposes a rich client-side API that allows you to control its behavior.

    You can manipulate the Min/MaxDate values using the following client-side properties:
    • get_minDate( ) - Returns the date, representing the MinDate of the datepicker.
    • set_minDate(date) - if the date is valid, the datepicker MinDate is set to it.
    • get_maxDate( ) - Returns the date, representing the MaxDate of the datepicker.
    • set_maxDate(date) - if the date is valid, the datepicker MaxDate is set to it.


    You can manipulate the date selection by using the get_selectedDate()/set_selectedDate(newValue) method pair:
    var date = datePicker.get_selectedDate();
    date.setDate(date.getDate() + 1);
    datePicker.set_selectedDate(date);

    The datepicker child controls (RadDateInput, RadCalendar, DatePopupButton) are available via the DateInput, Calendar, and DatePopupButton properties.

    Customizing the popup logic is done by using the set_popupDirection() method to set the PopupDirection property on the client. This method recognizes four values:
    • TopLeft
    • TopRight
    • BottomLeft
    • BottomRight


    After the direction is set, you can display the calendar with the showPopup() method.

Source Code

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

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ 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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="CS"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
              //<![CDATA[
                function NextDay(e)
                {
                    var datePicker = $find("<%= RadDatePicker1.ClientID %>"); ;

                    var date = datePicker.get_selectedDate();

                    if (datePicker.isEmpty())
                        date = new Date();

                    date.setDate(date.getDate() + 1);
                    datePicker.set_selectedDate(date);

                    CancelPopupClose(e);

                    $get("log").innerHTML += "DatePicker.SelectedDate changed to " + date.format("MM/dd/yyyy") + "<br />";
                    $get("log").scrollTop = 10000000;
                }

                function PrevDay(e)
                {
                    var datePicker = $find("<%= RadDatePicker1.ClientID %>"); ;

                    var date = datePicker.get_selectedDate();

                    if (datePicker.isEmpty())
                        date = new Date();

                    date.setDate(date.getDate() - 1);
                    datePicker.set_selectedDate(date);

                    CancelPopupClose(e);

                    $get("log").innerHTML += "DatePicker.SelectedDate changed to " + date.format("MM/dd/yyyy") + "<br />";
                    $get("log").scrollTop = 10000000;
                }

                function PopupAbove(e, pickerID)
                {
                    var datePicker;
                    if (pickerID == null)
                    {
                        datePicker = $find("<%= RadDatePicker1.ClientID %>");
                    }
                    else
                    {
                        datePicker = $find(pickerID);
                    }
                    datePicker.set_popupDirection(Telerik.Web.RadDatePickerPopupDirection.TopRight); // Set the popup direction to TopRight
                    datePicker.showPopup();
                    datePicker.set_popupDirection(Telerik.Web.RadDatePickerPopupDirection.BottomRight); // Set the popup direction back to default (BottomRight)
                }

                function CancelPopupClose(e)
                {
                    if (e.stopPropagation)
                        e.stopPropagation();
                    e.cancelBubble = true;
                }

                function setMinDate(minDate)
                {
                    var RadDatePicker3 = $find("<%= RadDatePicker3.ClientID %>");
                    if (minDate.checked)
                    {
                        var date1 = new Date(2005, 0, 1);
                        RadDatePicker3.set_minDate(date1);
                        $get("log").innerHTML += "DatePicker.MinDate changed to 2005/01/01 <br />";
                        $get("log").scrollTop = 10000000;
                    }
                    else
                    {
                        var date1 = new Date(1900, 0, 1);
                        RadDatePicker3.set_minDate(date1);
                        $get("log").innerHTML += "DatePicker.MinDate changed to 1900/01/01 <br />";
                        $get("log").scrollTop = 10000000;
                    }
                }

                function setMaxDate(maxDate)
                {
                    var date1 = new Date(2012, 0, 1);
                    var RadDatePicker3 = $find("<%= RadDatePicker3.ClientID %>");
                    if (maxDate.checked)
                    {
                        RadDatePicker3.set_maxDate(date1);
                        $get("log").innerHTML += "DatePicker.MaxDate changed to 2012/01/01 <br />";
                        $get("log").scrollTop = 10000000;
                    }
                    else
                    {
                        var date1 = new Date(2050, 0, 1);
                        RadDatePicker3.set_maxDate(date1);
                        $get("log").innerHTML += "DatePicker.MaxDate changed to 2050/01/01 <br />";
                        $get("log").scrollTop = 10000000;
                    }
                }

                function Enable(control)
                {
                    var RadDatePicker3 = $find("<%= RadDatePicker3.ClientID %>");
                    if (control.checked)
                    {
                        RadDatePicker3.set_enabled(true);
                        $get("log").innerHTML += "RadDatePicker Enabled <br />";
                        $get("log").scrollTop = 10000000;
                    }
                    else
                    {
                        RadDatePicker3.set_enabled(false);
                        $get("log").innerHTML += "RadDatePicker Disabled <br />";
                        $get("log").scrollTop = 10000000;
                    }
                }

                function clearText()
                {
                    var RadDatePicker3 = $find("<%= RadDatePicker3.ClientID %>");
                    RadDatePicker3.clear();
                    $get("log").innerHTML += "DatePicker value cleared<br />";
                    $get("log").scrollTop = 10000000;
                }
                //]]>
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Buttons" />
        <div style="float: left">
            <fieldset style="width: 420px;">
                <legend>Select date:</legend>
                <telerik:RadDatePicker ID="RadDatePicker1" MinDate="2006/01/01" runat="server" ZIndex="30001">
                </telerik:RadDatePicker>
                &nbsp;
                <button onclick="javascript: NextDay(event); return false">
                    Move to next day</button>&nbsp;
                <button onclick="javascript: PrevDay(event); return false">
                    Move to previous day</button>&nbsp;
                <br />
                <span>Popup</span><br />
                <button onclick="javascript: PopupAbove(event); return false;">
                    Popup above input</button>
                <br />
                <br />
            </fieldset>
            <fieldset style="width: 420px">
                DatePicker PopupButton popup above:
                <br />
                <telerik:RadDatePicker ID="RadDatePicker2" MinDate="2006/1/1" runat="server">
                </telerik:RadDatePicker>
                <br />
                <br />
            </fieldset>
            <fieldset style="width: 420px">
                <legend>Select Min/MaxDate for the RadDatePicker: </legend>
                <div style="float: left;">
                    <telerik:RadDatePicker ID="RadDatePicker3" runat="server">
                    </telerik:RadDatePicker>
                    <br />
    <asp:CheckBox runat="server" ID="Enabled" Checked="true" Text="RadDatePicker Enabled"
    onclick="Enable(this);" />
                    <br />
                    <button onclick="javascript: clearText(); return false;">
                        Clear DatePicker value</button>
                </div>
                <div style="float: right;">
                    <br />
                    MinDate:<asp:CheckBox runat="server" ID="MinDate" Text="2005/01/01" onclick="setMinDate(this);" />
                    <br />
                    MaxDate:<asp:CheckBox runat="server" ID="MaxDate" Text="2012/01/01" onclick="setMaxDate(this);" />
                </div>
            </fieldset>
        </div>
        <fieldset style="width: 280px; float: right;">
            <legend>Event Logger </legend>
            <div id="log" style="float: right; height: 54px; width: 270px; border: 1px solid Teal;
                color: Teal; overflow-y: scroll">
            </div>
        </fieldset>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div style="clear: both">
            <!-- -->
        </div>
        <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