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" />
</div>
</asp:Content>