Office2010Blue skin

DateTimePicker - Validation

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
Validating the times 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 time entries.
We are using two RequiredFieldValidator instances to ensure the date pickers are not left empty.
Additionally, a custom validator is used to validate that the second time value is greater than the first. In this specific instance, the most straightforward approach would have been to use Range/Compare validators. However, they both only cater for handling values of type Date. In this case, we would need to match the time fraction of the date, and hence a more flexible approach has been used, by coupling a CustomValidator with some client script logic.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.Validation.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            var RadDateTimePicker1;
            var RadDateTimePicker2;

            function validate(sender, args) {
                var Date1 = new Date(RadDateTimePicker1.get_selectedDate());
                var Date2 = new Date(RadDateTimePicker2.get_selectedDate());
                args.IsValid = true;
                if ((Date2 - Date1) < 0) {
                    alert("The second time value should be greater than the first!");
                    args.IsValid = false;

            function onLoadRadDateTimePicker1(sender, args) {
                RadDateTimePicker1 = sender;

            function onLoadRadDateTimePicker2(sender, args) {
                RadDateTimePicker2 = sender;
    <div class="demo-container size-thin" runat="server" id="containerDiv">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                    <td>Start Time&nbsp;
                        <telerik:RadDateTimePicker RenderMode="Lightweight" Width="100%" ID="RadDateTimePicker1" runat="server">
                            <DateInput ID="DateInput1" runat="server">
                                <ClientEvents OnLoad="onLoadRadDateTimePicker1"></ClientEvents>
                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadDateTimePicker1"
                            ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                    <td rowspan="2">
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                    <td>End Time&nbsp;
                        <telerik:RadDateTimePicker RenderMode="Lightweight" ID="RadDateTimePicker2" Width="100%" runat="server">
                            <DateInput ID="DateInput2" runat="server">
                                <ClientEvents OnLoad="onLoadRadDateTimePicker2"></ClientEvents>
                        <asp:RequiredFieldValidator runat="server" ID="Requiredfieldvalidator2" ControlToValidate="RadDateTimePicker2"
                            ErrorMessage="Enter a date!"></asp:RequiredFieldValidator>
                        <asp:CustomValidator ID="CustomValidator1" EnableClientScript="true" runat="server"
                            ControlToValidate="RadDateTimePicker2" ClientValidationFunction="validate">
                        <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Save" ID="Button1" OnClick="Button1_Click"></telerik:RadButton>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?