Custom Validation to Validate Dates with Client-Script

In this article I am going to explain how we can validate two dates using custom-validator. This article also covers how to use a JQuery calendar in master pages.

Java-script for validating dates is as follows:

<script type="text/javascript">

function monthDiff(d1, d2) {
        var months;
            var date1 = new Date(d1);
            var date2 = new Date(d2);
            return (date1 - date2) / (1000 * 60 * 60 * 24);
            return months;
       }

        //function getLeapYear
 
        function difference(d1, d2)
        {
            var hiredate, dob; var diff = 18 * 12;
            hiredate = document.getElementById(d1).value;
            dob = document.getElementById(d2).value;
            var Age = monthDiff(hiredate, dob);
            var compareVal = 365 * 18; //getCompareVal(hiredate,dob);
            if (Age >= compareVal) {
                return true;
                //true
            } else {
                return false; //false
            }
        }

function validatehiredate(value, arg) {
                        arg.IsValid = (difference('ctl00_ContentPlaceHolder1_txtHiredate','ctl00_ContentPlaceHolder1_txtDateofBirth'));
                  }
</script>

To load calendar the script is as follows

 <script type="text/javascript">
        $(function () {
            $('#ctl00_ContentPlaceHolder1_txtHiredate').datepick({ showOnFocus: false, showTrigger: '#calImg' });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            $('#ctl00_ContentPlaceHolder1_txtDateofBirth').datepick({ showOnFocus: false, showTrigger: '#Img1' });
        });
    </script>

In master page include the following

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="js/jquery.datepick.js"></script>

    <style type="text/css">
        @import "css/jquery.datepick.css";
    </style>

Sample Images:

Loading Calendar:



Validation



Default.aspx:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <script type="text/javascript">

function monthDiff(d1, d2) {
        var months;
            var date1 = new Date(d1);
            var date2 = new Date(d2);
            return (date1 - date2) / (1000 * 60 * 60 * 24);
            return months;
       }

        //function getLeapYear

        function difference(d1, d2)
        {
            var hiredate, dob; var diff = 18 * 12;
            hiredate = document.getElementById(d1).value;
            dob = document.getElementById(d2).value;
            var Age = monthDiff(hiredate, dob);
            var compareVal = 365 * 18; //getCompareVal(hiredate,dob);

            if (Age >= compareVal) {
                return true;
                //true
            } else {
                return false; //false
            }
        }

function validatehiredate(value, arg) {
                        arg.IsValid = (difference('ctl00_ContentPlaceHolder1_txtHiredate','ctl00_ContentPlaceHolder1_txtDateofBirth'));
                  }
    </script>

    <script type="text/javascript">
        $(function () {
            $('#ctl00_ContentPlaceHolder1_txtHiredate').datepick({ showOnFocus: false, showTrigger: '#calImg' });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            $('#ctl00_ContentPlaceHolder1_txtDateofBirth').datepick({ showOnFocus: false, showTrigger: '#Img1' });

        });
    </script>

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" ValidationGroup="personal"
        Style="left: 459px; position: absolute; top: 171px" />
                <asp:Label ID="lblDate" runat="Server" Text="HireDate" style="left: 321px; position: absolute; top: 98px"></asp:Label>

    <asp:Label style="LEFT: 310px; POSITION: absolute; TOP: 133px" id="Label1" runat="Server" Text="DateofBirth"></asp:Label>
                <asp:TextBox ID="txtHiredate" runat="server" ValidationGroup="personal" Style="left: 397px;
                    position: absolute; top: 96px" />   

                <div style="display: none;">
                    <img id="calImg" src="images/calendar.gif" alt="Popup" class="trigger" style="left: 564px;
                        position: absolute; top: 101px" />
                </div>

    <asp:TextBox ID="txtDateofBirth" runat="server" ValidationGroup="personal" Style="left: 398px;
        position: absolute; top: 131px" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="validatehiredate"
        ControlToValidate="txtDateofBirth" ValidationGroup="personal" Display="Dynamic"
        Style="left: 596px; position: absolute; top: 132px">can not hire guy less than 18 yrs</asp:CustomValidator>
    <div style="display: none;">
        <img id="Img1" src="images/calendar.gif" alt="Popup" class="trigger" style="left: 568px;
            position: absolute; top: 136px" />
        &nbsp;</div>
</asp:Content>