In the following example I have discussed about calculating the difference between two days. Here, I have taken three text boxes, two are for entering "from date" and "to date". The third one is meant for showing the result after calculating the difference between those two days.
.aspx Page :(Source)
Then call the 'DateDifference()' method in 'onchange' event of the text boxes:
.aspx Page :(Source)
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="DateDifference.aspx.cs"
Inherits="pages_DateDifference"
%>
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<table class="style1">
<tr>
<td>
<asp:Label ID="lblFromDate"
runat="server"
Text="From Date:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFromDate"
runat="server"></asp:TextBox>
<asp:CalendarExtender ID="calFromDate"
runat="server"
TargetControlID="txtFromDate" PopupButtonID="txtFromDate"
Format="dd/MM/yyyy">
</asp:CalendarExtender>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblToDate"
runat="server"
Text="To Date
:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtToDate"
runat="server"></asp:TextBox>
<asp:CalendarExtender ID="calToDate"
runat="server"
TargetControlID="txtToDate"
PopupButtonID="txtToDate"
Format="dd/MM/yyyy">
</asp:CalendarExtender>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDifference"
runat="server"
Text="Total Days
:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtDifference"
runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
.aspx Page :(Design)
JQuery Method
<script type="text/javascript">
function DateDifference() {
$("#txtDifference").val('');
//To check if both From Date and To Date are not null
if ($("#txtFromDate").val()
!= '' && $("#txtToDate").val()
!= '') {
// To convert the entered Date string (dd/MM/yyyy) to a
valid date format(yyyy,MM,dd)
var FromDateArr = $("#txtFromDate").val().split('/');
var FromDate = new
Date(FromDateArr[2], FromDateArr[1], FromDateArr[0]);
var ToDateArr = $("#txtToDate").val().split('/');
var ToDate = new
Date(ToDateArr[2], ToDateArr[1], ToDateArr[0]);
if (ToDate >= FromDate) {
var Differnece = new Date(ToDate - FromDate);
$("#txtDifference").val((Differnece.getTime()
/ 86400000) + 1);
}
}
}
</script>
Then call the 'DateDifference()' method in 'onchange' event of the text boxes:
<asp:TextBox ID="txtFromDate"
runat="server"
onchange='DateDifference();'></asp:TextBox>
<asp:TextBox ID="txtToDate"
runat="server"
onchange='DateDifference();'></asp:TextBox>
Output
Please do send me comments and suggestions about my posts :).
No comments:
Post a Comment