Step 1:- JavaScript Code
<script>
$(function () {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
todayHighlight: true
});
});
$(function () {
$("#txtPurchaseDate").change(function () {
var jPurchaseDate = $("#txtPurchaseDate").val();
var jExpiryDate;
// Split the Purchase Date
jPurchaseDate =
jPurchaseDate.split('/');
// After splitting, Arrange the
mm/dd/yyyy format
jPurchaseDate = jPurchaseDate[1] + '/' +
jPurchaseDate[0] + '/' + jPurchaseDate[2]; //mm/dd/yyyy
// After arranging Purchase Date in
mm/dd/yyyy format, convert to date format
jPurchaseDate = new Date(jPurchaseDate);
// Adding 12 months in date
jExpiryDate = jPurchaseDate.setMonth(jPurchaseDate.getMonth() + 12);
// After adding 12 months in date,
convert to date format
jExpiryDate = new Date(jExpiryDate);
// Subtracting day 1 from date
jExpiryDate =
jExpiryDate.setDate(jExpiryDate.getDate() - 1);
// After Subtracting day 1 from date,
convert to date format
jExpiryDate = new Date(jExpiryDate);
var dd = jExpiryDate.getDate();
var mm =
jExpiryDate.getMonth() + 1; //January is 0!
var yyyy = jExpiryDate.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
jExpiryDate = dd + '/' + mm + '/' + yyyy;//dd/mm/yyyy
$("#txtExpiryDate").val(jExpiryDate);
});
});
</script>
Step 2:- Design Page
<table>
<tr>
<td>Purchase
Date</td>
<td>
<asp:TextBox ID="txtPurchaseDate" CssClass="datepicker" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
<tr>
<td>Expiry
Date</td>
<td>
<asp:TextBox ID="txtExpiryDate" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
</table>
Step 3:- Complete Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to add months to
a date in JavaScript?</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
todayHighlight: true
});
});
$(function () {
$("#txtPurchaseDate").change(function () {
var jPurchaseDate = $("#txtPurchaseDate").val();
var jExpiryDate;
// Split the Purchase Date
jPurchaseDate = jPurchaseDate.split('/');
// After splitting, Arrange the
mm/dd/yyyy format
jPurchaseDate = jPurchaseDate[1] + '/' +
jPurchaseDate[0] + '/' + jPurchaseDate[2]; //mm/dd/yyyy
// After arranging Purchase Date in
mm/dd/yyyy format, convert to date format
jPurchaseDate = new Date(jPurchaseDate);
// Adding 12 months in date
jExpiryDate = jPurchaseDate.setMonth(jPurchaseDate.getMonth() + 12);
// After adding 12 months in date,
convert to date format
jExpiryDate = new Date(jExpiryDate);
// Subtracting day 1 from date
jExpiryDate = jExpiryDate.setDate(jExpiryDate.getDate() - 1);
// After Subtracting day 1 from date,
convert to date format
jExpiryDate = new Date(jExpiryDate);
var dd =
jExpiryDate.getDate();
var mm = jExpiryDate.getMonth() + 1; //January is 0!
var yyyy = jExpiryDate.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm
< 10) {
mm = '0' + mm;
}
jExpiryDate = dd + '/' + mm + '/' + yyyy;//dd/mm/yyyy
$("#txtExpiryDate").val(jExpiryDate);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Purchase
Date</td>
<td>
<asp:TextBox ID="txtPurchaseDate" CssClass="datepicker" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
<tr>
<td>Expiry
Date</td>
<td>
<asp:TextBox ID="txtExpiryDate" runat="server" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Step 4:- Output
This comment has been removed by a blog administrator.
ReplyDelete