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

By: Suresh Dasari 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" %>

//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>

<asp:ScriptManager ID="script" runat="server">

</asp:ScriptManager>

<div>

<table>

<tr>

<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>

<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