MonthYearPicker - Validation

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
Validating the dates picked by the user can be done by using the standard ASP.NET validator controls. This example shows a sample period selection page. The user has to enter two dates, the second one being after the first.

We are using two RequiredFieldValidator instances to ensure the date pickers are not left empty. A CompareValidator ensures that the second date is greater than the first one.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.MonthYearPicker.Validation.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 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" />
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function Button1_ClientClick()
            {
                $get("<%= Label1.ClientID %>").innerHTML = "";
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container size-thin" runat="server" id="containerDiv">
    <table>
        <tr>
            <td>
                <label for="RadMonthYearPicker1">Start Month:&nbsp;</label>
            </td>
            <td>
                <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="RadMonthYearPicker1" Width="100%" runat="server">
                </telerik:RadMonthYearPicker>
                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadMonthYearPicker1"
                    ErrorMessage="Select a start month!" Text="*"></asp:RequiredFieldValidator>
            </td>
            <td rowspan="2">
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="RadMonthYearPicker2">End Month:&nbsp;</label>
            </td>
            <td>
                <telerik:RadMonthYearPicker RenderMode="Lightweight" ID="RadMonthYearPicker2" Width="100%" runat="server">
                </telerik:RadMonthYearPicker>
                <asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="RadMonthYearPicker2"
                    ErrorMessage="Select an end month!" Text="*"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
               
                <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Save" ID="Button1" OnClick="Button1_Click"
                    OnClientClicked="Button1_ClientClick"></telerik:RadButton>
                <br />
                 <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="RadMonthYearPicker2"
                    ControlToCompare="RadMonthYearPicker1" Operator="GreaterThan" Type="Date" ErrorMessage="The second date must be after the first one.<br /><br />">
                </asp:CompareValidator>
                <asp:Panel ID="Panel1" runat="server">
                    <asp:ValidationSummary ID="ValidationSummary1" ShowSummary="true" runat="server">
                    </asp:ValidationSummary>
                </asp:Panel>
            </td>
        </tr>
    </table>
        </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?