Telerik rad date picker show error message when user keys in future date

Question

I have a telerik:RadDatePicker in which i am restricting users from selecting future dates by setting MaxDate of it to today in code behind. This works perfectly fine. but when the user keys in a date which is greater than today it just displays an ! in the date picker as shown below:

Instead I want to show a error message to the user "Future dates are not allowed" How can i achieve this? Below is the existing code:

<telerik:RadDatePicker CssClass="cssDate" ID="fromDate" runat="server" 
 Skin="Vista">
 <DateInput ID="DateInput1" runat="server" LabelCssClass="datePick" Skin="Vista">
  </DateInput>
 <Calendar ShowRowHeaders="false" ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
ViewSelectorText="x" Skin="Vista">
</Calendar>
<DatePopupButton CssClass="rcCalPopup"></DatePopupButton>
 </telerik:RadDatePicker>

And the code behind where i set the max date of this:

  fromDate.MaxDate = DateTime.Now;

Answer 1

After days of research and asking grandpa google, He provided me link to telerik official forums where they confirmed that this cannot be done.

Link to what i want to say.

The reply says "Actually we have modified the error handling logic a bit as our original implementation did not seem quite intuitive. If garbage input is entered or a date out of range is selected the control will internally set its value to null; the visible input field will not clear its contents but will display them with invalid style until a valid value is entered. However, you will still need to handle possible parsing errors in the client-side OnError event handler of the input component (you can find another example here) as if the input does not contain a valid date it will post empty value to the server and this functionality cannot be turned off."

Hope this piece of information will be helpful to others on SO :).

Answer 2

Use the OnError logic...

function tbApplyTime2_dateError(sender, args) {

<DateInput ClientEvents-OnError="tbApplyTime2_dateError" />

Handling the error type coming in:

switch (args.get_reason()) {
            case Telerik.Web.UI.InputErrorReason.ParseError:
                validationMessageLabel.text('Invalid Date entered');
                break;
            case Telerik.Web.UI.InputErrorReason.OutOfRange:
                validationMessageLabel.text('Date must be after sent time');
                break;
}

Answer 3

You can possibly work around this by not allowing the user to enter a date by typing it and by only using the calendar control, for example;

<telerik:RadDatePicker ID="dt" runat="server" 
                        EnableTyping="false" onkeydown="javascript:return false;" ...... />

Answer 4

This code works, it displays an alert message and resets the date to its previous value when a future date is entered.

<script type="text/javascript">

    function ValidateDate(sender,args) {
        var datePicker = $find("<%=RadDatePicker1.ClientID%>");
        var todayDate = new Date("<%= System.DateTime.Today %>");
        todayDate.setHours(0, 0, 0, 0);

        if (args.get_newDate() > todayDate) {
            datePicker.set_selectedDate(args.get_oldDate());
            alert("Can not enter future dates.");
        }
    }

</script>

<telerik:RadDatePicker ID="RadDatePicker1"  runat="server" ClientEvents-OnDateSelected="ValidateDate">
    <Calendar ShowRowHeaders="false"></Calendar>
</telerik:RadDatePicker>