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

Client-Side Events

RadDatePicker

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

  • OnDateSelected - fired whenever the selected date of the datepicker is changed.
  • 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 DatePicker 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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Calendar.Functionality.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 class="demo-container size-thin">
        <h2 class="qsfSubtitle">RadDatePicker</h2>
        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" runat="server" MinDate="2006/1/1" width="100%" >
            <ClientEvents OnPopupOpening="OnPopupOpening" OnPopupClosing="OnPopupClosing" OnDateSelected="OnDateSelected"></ClientEvents>
            <DateInput runat="server" ID="DateInput">
                <ClientEvents OnLoad="onLoad"></ClientEvents>
            </DateInput>
        </telerik:RadDatePicker>
    </div>
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance