Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    104
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calculate Dates Automatically using JavaScript

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

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sure this page will help you quite a bit:
    http://developer.netscape.com/viewso...ateobject.html

    If you read the section on 'Doing the Math', you'll see that you can use something like:
    Code:
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    629
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Perhaps this will help:

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

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit: See below

    .....Willy
    Last edited by Willy Duitt; 04-23-2004 at 01:46 PM.

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    FWIW: Attached is a Popup Calendar Date Picker script I have saved from Javascript Kit which you also may find useful.

    .....Willy
    Attached Files Attached Files

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Posts
    104
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #7
    New to the CF scene
    Join Date
    Feb 2006
    Location
    San Antonio, TX
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question New One

    Okay, here's one for you:

    Start dates Vary between Monday and Thursdays.

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

    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.

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

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    629
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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);

  • #9
    New to the CF scene
    Join Date
    Feb 2006
    Location
    San Antonio, TX
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    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

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    629
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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;

  • #11
    New to the CF scene
    Join Date
    Feb 2006
    Location
    San Antonio, TX
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    629
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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>

  • #13
    New to the CF scene
    Join Date
    Feb 2006
    Location
    San Antonio, TX
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

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

    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

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    629
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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

  • #15
    New to the CF scene
    Join Date
    Feb 2006
    Location
    San Antonio, TX
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •