...

View Full Version : Calculate Dates Automatically using JavaScript



WebPlaya
04-22-2004, 05:49 PM
Hello all,

Here I am asking for help again!

I am trying to make this page but not being too familiar with JavaScript, I am absolutely stuck! I am only limited to HTML and JS using on pages. I can not use any server side languages.

I am trying to make a page where there are three input fields.

Field 1: User can input Start Date (possibly can be selected from calendar)

Field 2: User can input End Date (possibly can be selected from calendar)

Field 3: will take a number (number of days that needs to be skipped from the start date. This field also possibly has default value such as 4 or 5 days assigned but also can be changed by user)

And then submit button. Once the submit button is hit, user gets a result. Now what’s that result is supposed to be? Here we go….

Exp: User enters 4/22/04 as start date. And then enters 5/22/04 as end date. In field 3, the default value is 5 but user decides to change that to 7 days. And when he hits submit button, the result is

4/29/04 – Thursday (7 th day from the start date)
5/6/04 – Thursday (14th day from the start date)
5/13/04 – Thursday (21st day from the start date)
5/20/04 – Thursday (28th day from the start date)

Now it stops at 5/20/04 because the end date is 5/22/04.

I hope I made it clear enough to understand.. Any help is greatly appreciated!! And if you guys can help me with it then, at least the doc is going to be happy for his upcoming appointments and will be easy to figure out.. :)

Thanks a lot for considering to help me guys.. :)

sad69
04-22-2004, 07:10 PM
I'm sure this page will help you quite a bit:
http://developer.netscape.com/viewsource/goodman_dateobject.html

If you read the section on 'Doing the Math', you'll see that you can use something like:


var futureDate = new Date(today + (DAY * n));


Where n is the number in the 3rd field, and today is the n-1 multiple of your start date less than your end date. You just have to loop through this ad print them off and you're good to go.

Play with it and if you need help or get stuck, post back and we'll see if we can help you with your problem.

Good luck,
Sadiq.

jalarie
04-22-2004, 08:21 PM
Perhaps this will help:

Now=new Date();
DayLength=1*24*60*60*1000;
Days=7;
Then=new Date(Now*1+DayLength*Days);
alert(Then);

Willy Duitt
04-22-2004, 08:46 PM
Edit: See below

.....Willy

Willy Duitt
04-22-2004, 09:00 PM
FWIW: Attached is a Popup Calendar Date Picker script I have saved from Javascript Kit which you also may find useful.

.....Willy

WebPlaya
04-25-2004, 07:11 PM
wow.. this is great stuff.. I think I have gotten exactly what I was looking for.

Like I had mentioned earlier.. I am like the dumbest person when it comes to java script.. but thanks to those C++ classes.. I think I know few things..

I'll play around with your ideas and help and see if I can complete it.. if not.. then I guess you guys will have to finish it for me.. ha ha ha..

Thanks again for your help again...

TVining
02-14-2006, 02:02 AM
Okay, here's one for you:

Start dates Vary between Monday and Thursdays. :p

Graduation is ALWAYS on a Friday, 7 weeks after they start. :eek:

I want a page where someone can put in a start date, and the page will display the Graduation date. Keep in mind, that regardless of the day they start, Grad is ALWAYS on the 7th Friday. :mad:

I'm SURE it's easy, somewhat. :-)

jalarie
02-14-2006, 01:58 PM
TVining, try this:

Now=new Date();
Now_D=Now.getDay();
Diff=47-Now_D;
Factor=24*60*60*1000; // seconds per day
Target=new Date(Now*1+Diff*Factor);
alert(Target);

TVining
02-14-2006, 02:38 PM
Thanks, looks like it works.

If Im not mistraken, I want to change "NOW=New Date()" to "var entry=New Date()" if I am going to use a form to pass the start date to the script, right?

Thanks

jalarie
02-14-2006, 02:56 PM
You will need to pick up the date entered by the user something like this:

UDate=document.forms[0].entry.value;

If the user is a real geek, s/he may be able to enter the date in a way that the browser likes:

Now=new Date(UDate);

Otherwise, you'll have to break apart what is entered (maybe MM/DD/YY format) and rearrange the pieces. Also, you'll need to know that the "Date" function numbers the months zero through eleven rather than one through twelve. This might help you get going:

UDate=document.forms[0].entry.value;
i1=UDate.indexOf('/');
i2=UDate.indexOf('/',i1+1);
UDate_M=UDate.substring(0,i1);
UDate_D=UDate.substring(i1+1,i2);
UDate_Y=UDate.substring(i2+1);
UDate_Y=UDate_Y*1+2000;
UDate_M=UDate_M-1;
Now=new Date(UDate_Y,UDate_M,UDate_D);
Now_D=Now.getDay();
Diff=47-Now_D;
Factor=24*60*60*1000; // seconds per day
Target=new Date(Now*1+Diff*Factor);
document.forms[0].result.value=Target;

TVining
02-14-2006, 03:47 PM
I was with you right up til you did that. :-)


So, I want a forms page that says:
<form type=get action="dateout.htm">
<table border=1>
<tr>
<td>Date:</td>
<td><input type=text name=UDate></td>
</tr>
<tr>
<td colspan=2><input type=submit value="Submit!">
</td>
</tr>
</table>
</form>


and a results page (named Dateout.htm) that looks like this:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
UDate=document.forms[0].entry.value;
Now=new Date(UDate);
UDate=document.forms[0].entry.value;
i1=UDate.indexOf('/');
i2=UDate.indexOf('/',i1+1);
UDate_M=UDate.substring(0,i1);
UDate_D=UDate.substring(i1+1,i2);
UDate_Y=UDate.substring(i2+1);
UDate_Y=UDate_Y*1+2000;
UDate_M=UDate_M-1;
Now=new Date(UDate_Y,UDate_M,UDate_D);
Now_D=Now.getDay();
Diff=47-Now_D;
Factor=24*60*60*1000; // seconds per day
Target=new Date(Now*1+Diff*Factor);
document.forms[0].result.value=Target;
</SCRIPT>
</head>
<body>

</body>
</html>

And it will parse the form input UDate, split M/D/Y, calculate and open a popup with the graduation date??

Sorry, I'm not trying to get you to write this app for me, but I really don't understand the scripting process.

I can get Access, Excel and any number of tools to do this easily, but putting it on a webpage still is VERY awkward. :-(

Thanks,
TONY

jalarie
02-14-2006, 04:17 PM
I added comments to the script and put it within a web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US">
<head>

<title>Graduation Date</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en-US" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<link rev="made" href="mailto:jalarie@umich.edu" />

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="0" />

<!--
Author: James Alarie
Company: University of Michigan - Flint
Address: Murchie Science Building - 207D
303 E Kearsley St
Flint MI 48502
United States of America
Telephone: +1-810-762-3394x21
Fax: +1-810-762-3687
Web Site: http://spruce.flint.umich.edu/~jalarie/
E-Mail: jalarie@umich.edu
Comments: Having said that, I've probably told you more than I know.
-->

<script type="text/javascript">
<!-- Hide this code from non-JavaScript browsers
function GradDate() {
UDate=document.forms[0].entry.value; // pick up user entry
i1=UDate.indexOf('/'); // find first slash
i2=UDate.indexOf('/',i1+1); // ...second slash
UDate_M=UDate.substring(0,i1); // everything before first slash
UDate_D=UDate.substring(i1+1,i2); // ...between two slashes
UDate_Y=UDate.substring(i2+1); // ...after second slash
UDate_Y=UDate_Y*1+2000; // 2-digit year to 4-digit
UDate_M=UDate_M-1; // jan-dec=0-11
Now=new Date(UDate_Y,UDate_M,UDate_D); // convert to a date
Now_D=Now.getDay(); // sunday-saturday=0-6
Diff=47-Now_D; // seventh Friday later
Factor=24*60*60*1000; // seconds per day
Target=new Date(Now*1+Diff*Factor); // the target date
document.forms[0].result.value=Target; // display on the form
}
// End hiding -->
</script>

</head>

<body bgcolor="#ffffee" text="black" link="blue" vlink="#800088" alink="red">
<!-- Page Header -->
<center><h1>Graduation Date</h1></center>
<hr />

<!-- Content -->
<br />
<noscript>
<font color="red">
You must have javascript to make use of this page.
</font>
</noscript>

<form method="post" action="">
Date:&nbsp;
<input type="text" name="entry" id="entry" /> as MM/DD/YY
<br />
<input type="button" value=" Submit " title=" Submit " onclick="GradDate();" />
<br />
Grad:&nbsp;
<input type="text" name="result" id="result" />
</form>

<!-- Page Footer -->
<br clear="all" /><hr />
Written on February 14, 2006, by:&nbsp;
<a href="mailto:jalarie@umich.edu">James Alarie</a>

</body>

</html>

TVining
02-14-2006, 04:55 PM
Many, Many thanks!

I am going to personally work on getting the time out of it (I'm gonna figure this stuff out, I really am!) :thumbsup:

I modified the page to fit my site; and made sure the kudos stayed there.

It can be viewed at: www.bmtgrad.com, pull the menu down and select BMT: Simple Graduation Calculator.

Again, Many thanks...Im gonna take a Javascript class, I promise!

TV

jalarie
02-14-2006, 05:10 PM
The two "if (Target_Y...." lines below correct for different results for different browsers. Someone will probably give you a "getFullYear" version; sometimes that doesn't work; use mine. Respace the last line of the script with:

Target_M=Target.getMonth();
Target_D=Target.getDate();
Target_Y=Target.getYear();
if (Target_Y < 70) { Target_Y=Target_Y+2000; }
if (Target_Y < 1900) { Target_Y=Target_Y+1900; }
Target_M=Target_M*1+1; // Jan-Dec = 1-12
Formatted=Target_M+'-'+Target_D+'-'+Target_Y;
document.forms[0].result.value=Formatted; // display on the form

TVining
02-14-2006, 05:13 PM
I had cut it short by setting the Max Field length to 15. Man, there is a lot to learn on scripting. I think I'll go back to hiding in FoxPro, Paradox and Access when I get done here. :-)

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum