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

Client-Side Events

Event log
RadDateTimePicker 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.
  • OnPopupUpdating - fired only on calendar popup opening prior to the synchronization of the date in the calendar popup and the DateInput. 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. The event is obsolete. Please, use OnPopupOpening and OnPopupClosing events instead.
  • 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.
  • OnClientTimeSelected - fired whenever new time is choosen from the TimePicker.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ 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>
    
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        //<![CDATA[
        function OnPopupOpening(sender, args) {
            logEvent("OnPopupOpening fired by " + sender.get_id() + "<br />");
        }

        function OnPopupClosing(sender, args) {
            logEvent("OnPopupClosing fired by " + sender.get_id() + "<br />");
        }

        function OnDateSelected(sender, e) {
            if (e.get_newDate() != null) {
                logEvent("OnDateSelected: " + e.get_newDate().toDateString() + " selected in " + sender.get_id() + "<br />");
            }
            else {
                logEvent("OnDateSelected: Date cleared in " + sender.get_id() + "<br />");
            }
        }

        function OnClientTimeSelected(sender, e) {
            logEvent("OnClientTimeSelected: " + "Old time (" + e.get_oldTime() + ") was changed with (" + e.get_newTime() + ") <br />");
        }

        function onLoad(sender, args) {
            logEvent("Date input " + sender.get_id() + " loaded <br />");
        }
        //]]>
    </script>
    <div class="demo-container size-thin" runat="server" id="containerDiv">
        <h2>RadDateTimePicker: </h2>
        <telerik:RadDateTimePicker RenderMode="Lightweight" ID="RadDateTimePicker1" runat="server" MinDate="2006/1/1"
            Width="100%">
            <ClientEvents OnPopupOpening="OnPopupOpening" OnPopupClosing="OnPopupClosing" OnDateSelected="OnDateSelected"></ClientEvents>
            <TimeView OnClientTimeSelected="OnClientTimeSelected">
            </TimeView>
            <DateInput runat="server" ID="DateInput">
                <ClientEvents OnLoad="onLoad"></ClientEvents>
            </DateInput>
        </telerik:RadDateTimePicker>



    </div>

    <qsf:EventLogConsole runat="server" ID="EventLogConsole1"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance