Lets suppose we have a html page with three text boxes.
In one text box user has to enter the date in MM/DD/YYYY . Once foucs is lost in first text field ,m then Seccond text field is populated as "Input date+ 14" .
Third text field should be populated as "Input date+ 15
Even date validation should happen for input date.
For ex:- If input date entered is "01/01/1995" (MM/DD/YYYY)
Then second text field is populates as "01/15/1995" (MM/DD/YYYY)
Third text field populates as "01/29/1995" (MM/DD/YYYY).
Lets see the program how this is achieved.
<%--
Document : adddate
Adding days to input date
Author : murali
--%>
<html>
<body>
<script>
function addDays(currDate,days)
{
var dateSplit = currDate.split("/");
var dateInput = new Date( parseInt(dateSplit[2], 10),
parseInt(dateSplit[0], 10)-1,
parseInt(dateSplit[1], 10)
);
dateInput.setDate(dateInput.getDate() + days);
var res = ("0" + (dateInput.getMonth() + 1)).slice(-2) + "/" + ("0" + dateInput.getDate()).slice(-2) + "/" + dateInput.getFullYear() ;
return res;
}
function check_date(refillOrderDate)
{
var datePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if (!datePattern.test(refillOrderDate))
{
return false;
}
var dateSplit = refillOrderDate.split("/");
var day = dateSplit[1] ;
var month =dateSplit[0];
var year =dateSplit[2];
if(month>12 || day>31)
{
return false;
}
var leap = 0;
if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0))
{
leap = 1;
}
if ((month == 2) && (leap == 1) && (day > 29))
{ return false; }
if ((month == 2) && (leap != 1) && (day > 28))
{ return false ; }
if((day > 30) && ((month == "04") || (month == "06") || (month == "09")
|| (month =="11")))
{ return false; }
return true;
}
function updateDeliveryDate()
{
var err=0;
var orderDate= document.activityForm.orderDate.value;
if (orderDate.length==0)
{
document.activityForm.orderDate.value='';
document.activityForm.startPlaceDate.value='';
document.activityForm.endPlaceDate.value='';
return true;
}
if(orderDate.length==10)
{
if(check_date(orderDate))
{
document.activityForm.startPlaceDate.value = addDays(orderDate,14);
document.activityForm.endPlaceDate.value = addDays(orderDate,28);
return true;
}
else
{
err=1;
}
}
else
{
err=1;
}
if (err==1)
{
alert("Invalid date format. Date format should be mm/dd/yyyy");
document.activityForm.orderDate.value='';
document.activityForm.startPlaceDate.value='';
document.activityForm.endPlaceDate.value='';
document.activityForm.orderDate.focus();
return false ;
}
return true;
}
</script>
</head>
<body>
<form name="activityForm" >
If you order your product On <input type="text" name="orderDate" onblur="updateDeliveryDate()"/> <font color="red"> [(MM/DD/YYYY) Format]</font>
<br><br>
You will get your order between <input type="text" name="startPlaceDate" readonly/> and
<input type="text" name="endPlaceDate" readonly/>
</form>
</body>
</html>
SAMPLE OUTPUT
In one text box user has to enter the date in MM/DD/YYYY . Once foucs is lost in first text field ,m then Seccond text field is populated as "Input date+ 14" .
Third text field should be populated as "Input date+ 15
Even date validation should happen for input date.
For ex:- If input date entered is "01/01/1995" (MM/DD/YYYY)
Then second text field is populates as "01/15/1995" (MM/DD/YYYY)
Third text field populates as "01/29/1995" (MM/DD/YYYY).
Lets see the program how this is achieved.
<%--
Document : adddate
Adding days to input date
Author : murali
--%>
<html>
<body>
<script>
function addDays(currDate,days)
{
var dateSplit = currDate.split("/");
var dateInput = new Date( parseInt(dateSplit[2], 10),
parseInt(dateSplit[0], 10)-1,
parseInt(dateSplit[1], 10)
);
dateInput.setDate(dateInput.getDate() + days);
var res = ("0" + (dateInput.getMonth() + 1)).slice(-2) + "/" + ("0" + dateInput.getDate()).slice(-2) + "/" + dateInput.getFullYear() ;
return res;
}
function check_date(refillOrderDate)
{
var datePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if (!datePattern.test(refillOrderDate))
{
return false;
}
var dateSplit = refillOrderDate.split("/");
var day = dateSplit[1] ;
var month =dateSplit[0];
var year =dateSplit[2];
if(month>12 || day>31)
{
return false;
}
var leap = 0;
if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0))
{
leap = 1;
}
if ((month == 2) && (leap == 1) && (day > 29))
{ return false; }
if ((month == 2) && (leap != 1) && (day > 28))
{ return false ; }
if((day > 30) && ((month == "04") || (month == "06") || (month == "09")
|| (month =="11")))
{ return false; }
return true;
}
function updateDeliveryDate()
{
var err=0;
var orderDate= document.activityForm.orderDate.value;
if (orderDate.length==0)
{
document.activityForm.orderDate.value='';
document.activityForm.startPlaceDate.value='';
document.activityForm.endPlaceDate.value='';
return true;
}
if(orderDate.length==10)
{
if(check_date(orderDate))
{
document.activityForm.startPlaceDate.value = addDays(orderDate,14);
document.activityForm.endPlaceDate.value = addDays(orderDate,28);
return true;
}
else
{
err=1;
}
}
else
{
err=1;
}
if (err==1)
{
alert("Invalid date format. Date format should be mm/dd/yyyy");
document.activityForm.orderDate.value='';
document.activityForm.startPlaceDate.value='';
document.activityForm.endPlaceDate.value='';
document.activityForm.orderDate.focus();
return false ;
}
return true;
}
</script>
</head>
<body>
<form name="activityForm" >
If you order your product On <input type="text" name="orderDate" onblur="updateDeliveryDate()"/> <font color="red"> [(MM/DD/YYYY) Format]</font>
<br><br>
You will get your order between <input type="text" name="startPlaceDate" readonly/> and
<input type="text" name="endPlaceDate" readonly/>
</form>
</body>
</html>
SAMPLE OUTPUT
No comments:
Post a Comment