DatePicker - 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
  • styles.css
<%@ 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" %>
<!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>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin " runat="server" id="containerDiv">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <table>
                <tr>
                    <td>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" MinDate="2009/1/1" runat="server" DateInput-Label="Start Date:" DateInput-LabelWidth="100px" Width="100%">
                        </telerik:RadDatePicker>
                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadDatePicker1"
                            ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>

                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" MinDate="2009/1/1" runat="server" DateInput-Label="End Date:" Width="100%">
                        </telerik:RadDatePicker>
                        <asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="Raddatepicker2"
                            ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <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>
                    </td>

                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                    </td>
                </tr>
            </table>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Save" ID="Button1" OnClick="Button1_Click"></telerik:RadButton>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?