Min / Max Date Validation and Compare Validation for Two Pickers

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1696 posts
    Member since:
    Oct 2004

    Posted 09 Oct Link to this post

    In some cases you want to have the end users select dates within given ranges and to ensure one date is before the other (start - end date validation).

    To do this, you must:

    • implement the standard input validation (RequiredFieldValidator and CompareValidator)
    • implement server-side validation for the conditions (not shown in this example)
    • set the MinDate and/or MaxDate properties of the corresponding DatePicker controls

    To show meaningful error messages to the users in realtime (in case the built-in validator messages do not suffice), you can:

    1. hook to the underlying DateInput's client-side OnValueChanging event
    2. implement the validation logic yourself
    3. alert (or otherwise notify) the user about the action they need to take
    4. cancel the event if the new input does not pass validation

    Related resources:


    <table>
        <tr>
            <td>
                <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" MinDate="2009/1/1" runat="server" DateInput-Label="Start Date:" DateInput-LabelWidth="100px" Width="100%">
                    <DateInput>
                        <ClientEvents OnValueChanging="OnValueChangingStartDate" />
                    </DateInput>
                </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%">
                    <DateInput>
                        <ClientEvents OnValueChanging="OnValueChangingEndDate" />
                    </DateInput>
                </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>
    <script>
        function OnValueChangingStartDate(sender, args) {
            validateMinMaxDate(sender, args);
            var currDate = sender.parseDate(args.get_newValue());
            var secondPickerDate = $find("<%=RadDatePicker2.ClientID%>").get_selectedDate();
            if (secondPickerDate && secondPickerDate < currDate) {
                args.set_cancel(true);
                alert("choose a date before " + getHumanReadableDate(secondPickerDate));
            }
        }
     
        function OnValueChangingEndDate(sender, args) {
            validateMinMaxDate(sender, args);
            var currDate = sender.parseDate(args.get_newValue());
            var firstPickerDate = $find("<%=RadDatePicker1.ClientID%>").get_selectedDate();
            if (firstPickerDate && firstPickerDate > currDate) {
                args.set_cancel(true);
                alert("choose a date after " + getHumanReadableDate(firstPickerDate));
            }
        }
     
        function validateMinMaxDate(dateInput, args) {
            var minDate = dateInput.get_minDate();
            var maxDate = dateInput.get_maxDate();
            var currDate = dateInput.parseDate(args.get_newValue());
            if (currDate < minDate || currDate > maxDate) {
                args.set_cancel(true);
                alert("choose a date between " + getHumanReadableDate(minDate) + " and " + getHumanReadableDate(maxDate));
            }
            //if you show/hide elements on the page with the information from the alert, add an else statement to hide them here
            return false;
        }
     
        function getHumanReadableDate(dateToTransform) {
            //you can choose a different way to format the date, this uses the MS AJAX string.format() method.
            return dateToTransform.format("dd MMM yyyy");
        }
    </script>
Back to Top