Friday, November 4, 2011

Client Side Validation of RadDatePicker

Problem: How to validate two RadDatePicker Controls for example "From Date" can
not be greater than "To Date".
Solution: It can be done by using asp validation controls like RequiredFieldValidator and CompareValidator. RequiredFieldValidator checks that whether value(date) is present or not. And CompareValidator compares the two values. Here is the sample code,


<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Functionality.Validation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
<%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
<%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <qsf:HeadTag runat="server" ID="Headtag1">
    </qsf:HeadTag>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
    <qsf:Header ID="Header1" runat="server" NavigationLanguage="CS">
    </qsf:Header>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <table>
            <tr>
                <td>
                    Start:&nbsp;
                </td>
                <td>
                    <telerik:RadDatePicker ID="RadDatePicker1" MinDate="2009/1/1" runat="server">
                    </telerik:RadDatePicker>
                    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadDatePicker1"
                        ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                </td>
                <td rowspan="2">
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    End:&nbsp;
                </td>
                <td>
                    <telerik:RadDatePicker ID="RadDatePicker2" MinDate="2009/1/1" runat="server">
                    </telerik:RadDatePicker>
                    <asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="Raddatepicker2"
                        ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="Raddatepicker2"
                        ControlToCompare="RadDatePicker1" Operator="GreaterThan" Type="Date" ErrorMessage="The second date must be after the first one.<br /><br />">
                    </asp:CompareValidator>
                    <asp:Button runat="server" Text="Save" ID="Button1" CssClass="qsfButton" OnClick="Button1_Click">
                    </asp:Button>
                </td>
            </tr>
        </table>
    </telerik:RadAjaxPanel>
    <qsf:Footer ID="Footer1" runat="server">
    </qsf:Footer>
    </form>
</body>
</html>

2 comments: