New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-Side Events

RadDateRangePicker

Event log
RadDateRangePicker exposes several client-side events which allow easy and flexible use in a wide range of application scenarios:

  • OnPopupOpening - fired only on calendar popup opening prior to opening the calendar popup and its synchronizing with the DateInput value. Cancel this event to override the default DateRangePicker behavior of synchronizing the date in the DateInput and Calendar controls. This is useful for focusing the Calendar component on a date different from the DateInput one and/or set some condition for opening the Calendar control.
  • OnPopupClosing - fired only on calendar popup closing prior to the synchronization of the date in the calendar popup and the DateInput. This event is useful if you need to set some condition for closing the Calendar control on click of its date cell.
  • OnDateSelected - fired whenever the selected date of any of the embedded datepickers is changed.
    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • scripts.js
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.DateRangePicker.ClientSideProgramming.ClientSideEvents.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container" runat="server" id="Div2">
            <div class="demo-container no-bg">
                <div>
                    <h2 class="qsfSubtitle">RadDateRangePicker</h2>
                </div>

                <telerik:RadDateRangePicker RenderMode="Lightweight" ID="RadDateRangePicker1" runat="server" Width="100%">
                    <ClientEvents OnPopupOpening="OnPopupOpening" OnPopupClosing="OnPopupClosing" OnDateSelected="OnDateSelected" />
                </telerik:RadDateRangePicker>
            </div>
        </div>
    </div>
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

    Support & Learning Resources

    Find Assistance