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

OnDateSelecting

The OnDateSelecting client-side event handler is called immediately before the selected dates collection is updated to reflect the selection or deselection of a date.

The event handler receives two arguments:

  1. the RadCalendar object that fired the event.

  2. an event arguments object that exposes the following methods:OnDateSelecting event arguments object

Name Return Type Arguments Description
get_renderDay() RenderDay client-side object Returns the client-side RenderDay object that represents the day being selected or unselected.
get_isSelecting() bool Returns true if the day is about to be selected, false if it is about to be unselected.
set_cancel(value) bool Lets you prevent the selection or deselection from occurring.

The following example uses the OnDateSelecting event to confirm a change of selection and cancel the change if the user does not confirm:

<telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server">
    <ClientEvents OnDateSelecting="confirmChange" />
</telerik:RadCalendar>

<script>
function confirmChange(sender, eventArgs) {
    var date = eventArgs.get_renderDay().get_date();
    var dfi = sender.DateTimeFormatInfo;
    var formattedDate = dfi.FormatDate(date, dfi.ShortDatePattern);

    eventArgs.set_cancel(!confirm("Are you sure you want to " + (eventArgs.get_isSelecting() ? "select " : "unselect ") + formattedDate + "?"));
}
</script>

You can also use this event to perform client-side validation:

<telerik:RadCalendar runat="server" ID="RadCalendar1" RenderMode="Lightweight">
    <ClientEvents OnDateSelecting="OnDateSelecting" />
</telerik:RadCalendar>
<script>
    function OnDateSelecting(sender, args) {
        if (args.get_isSelecting()) {
            var rDay = args.get_renderDay();
            var selDates = rDay.get_date();
            var currDate = new Date();
            if (selDates[0] < currDate.getFullYear() ||
                selDates[1] < (currDate.getMonth() + 1) ||
                selDates[2] < currDate.getDate()) {
                alert("selected date is in the past and this is not allowed");
                args.set_cancel(true);
            }
        }
    }
</script>

See Also

In this article