Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Calculating the difference between two dates range is 30 days in javascript or validation to Check end date is not greater than start date and two dates range is not more than 30 days using ajax and javascript in asp.net

Aug 22, 2010
Introduction:

Here I will explain how to check end date greater than start date and check two dates difference range is 30 days or not using asp.net.

Description:

Previously I explained how to use Ajax Collapsible panel . I explained many articles on Ajax now I will explain to how to set validation to check end date greater than start date or not and check two dates difference range is 30 days using Ajax validator controls. 


First Create new website and add AjaxControlToolkit reference to your application after that add
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

To your aspx page and design your page likes this


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script language="javascript" type="text/javascript">
//No.of Days Difference
function DateDifference(sender,args) {
var startDate = Date.parse( document.getElementById('tbStartDate').value);
var endDate = Date.parse(document.getElementById('tbEndDate').value);
var timeDiff = endDate - startDate;

daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

if (daysDiff > 30) {
args.IsValid = false;
}
else {
args.IsValid = true ;
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server">
</asp:ScriptManager>
<div>
<table>
<tr>
<td align="right">
<b>Enter Start Date:</b>
</td>
<td>
<asp:TextBox SkinID="txtboxCustomizedMSkin" ID="tbStartDate" runat="server" CausesValidation="true" />
<ajaxToolkit:CalendarExtender ID="tbStartDate_CalendarExtender" runat="server" TargetControlID="tbStartDate" />
</td>
</tr>
<tr>
<td align="right">
<b>Enter End Date:</b>
</td>
<td>
<asp:TextBox SkinID="txtboxCustomizedMSkin" ID="tbEndDate" runat="server" CausesValidation="true"/>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="tbEndDate" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" ValidationGroup="Group1"/>
</td>
</tr>
</table>
</div>
<asp:RequiredFieldValidator ID="FirstTextBox" runat="server" ControlToValidate="tbStartDate"
ErrorMessage="Please Enter StartDate" ValidationGroup="Group1" Display="None">
</asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbEndDate"
ErrorMessage="Please Enter EndDate" ValidationGroup="Group1" Display="None">
</asp:RequiredFieldValidator>
<asp:CompareValidator ID="cmpvalidate" runat="server" Type="Date" ControlToCompare="tbStartDate"
ControlToValidate="tbEndDate" Operator="GreaterThanEqual" ErrorMessage="EndDate Greater than Start Date"
ValidationGroup="Group1" Display="None"></asp:CompareValidator>
<asp:CustomValidator ID="cusvalidator" runat="server" ClientValidationFunction="DateDifference"
ErrorMessage="The Date range should not exceed more than 30 days" EnableClientScript="true"
ValidationGroup="Group1" Display="None" ControlToValidate="tbEndDate"></asp:CustomValidator>
<ajaxToolkit:ValidatorCalloutExtender ID="txt1" runat="server" TargetControlID="FirstTextBox">
</ajaxToolkit:ValidatorCalloutExtender>
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server"
TargetControlID="RequiredFieldValidator1">
</ajaxToolkit:ValidatorCalloutExtender>
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server"
TargetControlID="cmpvalidate">
</ajaxToolkit:ValidatorCalloutExtender>
<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="cusvalidator"></ajaxToolkit:ValidatorCalloutExtender>
</form>
</body>
</html>

Now check the demo here it showing validation message if user does not any value in textboxes and if end date is less than start date again we are displaying validation message and if user selects more than 30 days again we are displaying validation message dates difference should not greater than 30 days 

Demo


Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

hermes said...

What is the differences between it!

Kuldeep Singh said...

hell
it i not correct diffence

Unknown said...

something is not working- can anyone help me?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.