www.webdeveloper.com
Results 1 to 11 of 11

Thread: Future Date Calculator

  1. #1
    Join Date
    Dec 2012
    Posts
    81

    Future Date Calculator

    I am trying to accomplish a few things hereÖ

    1. On submit, have the program display the month/day/year, and not just the year. Iím not sure how to output that extra data.

    2. Account for breaks throughout the degree program. Iím trying to put in a dropdown menu of weeks 1 through 5. If the user selects 1 week break, then it simply adds one week onto the graduation date. If a 2 week break is selected, then add two weeks to the graduation date, and so forth.

    3. Account for transfer of credits. If a student enters a certain number of credits (not a dropdown menu, but enter an actual integer into a text box) and that number is then multiplied by a variable (certain amount of weeks per credit), which is then further subtracted from the graduation date, bringing that date sooner.

    Does that make sense?

    Hereís what Iíve got so farÖ


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    form {
        width:500px;
        padding:20px;
        border:3px double rgb(128,128,128);
        margin:auto;
        text-align:center;
        background-color:#fff;
        color:rgb(64,64,64)
     }
    form div {
        margin:10px 0;
     }
    #future-date {
       line-height:1.3em;
     }
    </style>
    
    <script type="text/javascript">
    (function() {
       'use strict';
        var f;
    function init(){
       f=document.forms[0];
       f.reset();
    document.getElementById('potential').onclick=function() {
       gradDate();
     }
    document.getElementById('clear').onclick=function() {
       document.getElementById('future-date').firstChild.nodeValue='\u00a0';
     }
    }
    function gradDate() {
    
       var start_date=document.getElementById('start-date').value;
    
    for(var c=0;c<f.elements.length;c++) {
    if((f[c].type=='radio')&&(f[c].checked==true)){
       var grad=parseFloat(f[c].value);
      }
     }
    if(isNaN(grad)) {
       alert('Please select your course');
       return;
     }
       var pattern=/^\d{1,2}\/\d{1,2}\/\d{4}$/; //Regex to validate date format (dd/mm/yyyy)
    
    if(pattern.test(start_date)) {
       var begin=parseFloat(start_date.substr(6,4)); //getting start date 
       var end=grad; //getting course duration  
       var gradDate=begin+end; //calculating graduation date
       document.getElementById('future-date').firstChild.nodeValue='Your potential graduation date is : '+gradDate;
       return;
     } 
    else {
       alert('Invalid date format. Please Input in (dd/mm/yyyy) format!');
       return;
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    </script>
    
    </head>
    <body>
    
    <form action="#">
    
    <h4>Please select course...</h4>
    
    <div>
       <label for="ass">Associate</label>
        <input id="ass" name="course" type="radio" value="2" />
        <label for="bac">Bachelor</label>
        <input id="bac" name="course" type="radio" value="4" />
        <label for="mas">Master</label>
        <input id="mas" name="course" type="radio" value="2" />
    </div>
    
    <h4>Please enter your potential start date (dd/mm/yyyy):</h4>
    
    <div>
     <input id="start-date" type="text">
    </div><div>
     <input id="potential" type="button" value="See Your Potential Graduation Date">
     <input id="clear" type="reset" value="clear">
    </div>
    
    <div id="future-date">&nbsp;</div>
    
    </form>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    I'm not sure I understand all the requirements of item #3, but this might get you started towards your goal.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    body { background-color:#f0f0f0; }
    form {
        width:500px;
        padding:20px;
        border:3px double rgb(128,128,128);
        margin:auto;
        text-align:center;
        background-color:#fff;
        color:rgb(64,64,64)
     }
    form div { margin:10px 0; }
    #future-date { line-height:1.3em; }
    </style>
    
    <script type="text/javascript">
    (function() {
       'use strict';
        var f;
      function init(){
        f=document.forms[0];
        f.reset();
        document.getElementById('potential').onclick=function() { gradDate(); }
        document.getElementById('clear').onclick=function() {
          document.getElementById('future-date').firstChild.nodeValue='\u00a0';
        }
      }
      function gradDate() {
        var start_date=document.getElementById('start-date').value;
    
        for(var c=0;c<f.elements.length;c++) {
          if((f[c].type=='radio')&&(f[c].checked==true)){
            var grad=parseFloat(f[c].value);
          }
        }
        if(isNaN(grad)) {
          alert('Please select your course');
          return;
        }
        var pattern=/^\d{1,2}\/\d{1,2}\/\d{4}$/; //Regex to validate date format (dd/mm/yyyy)
    
        if(pattern.test(start_date)) {
          var tarr = start_date.split('/');
          var begin = new Date(tarr[2], tarr[1]-1, tarr[0]);
          var gradDate = new Date(begin.getFullYear()+grad, begin.getMonth(), begin.getDate());        // add graduation years
          var wkDays = document.getElementById('breakTime').value*7;
          gradDate = gradDate.addDays(wkDays);
    
          document.getElementById('future-date').firstChild.nodeValue='Your potential graduation date is : '+gradDate.toLocaleDateString();
          return;
        } else {
          alert('Invalid date format. Please Input in (dd/mm/yyyy) format!');
          return;
        }
      }
      window.addEventListener ? window.addEventListener('load',init,false) : window.attachEvent('onload',init);
    })();
    Date.prototype.addDays = function (days) {
      return new Date(this.getTime() + days*24*60*60*1000);
    }
    </script>
    </head>
    <body>
    
    <form action="#">
    
    <h4>Please select course...</h4>
    <div>
      <label for="ass">Associate</label>
      <input id="ass" name="course" type="radio" value="2" checked />
      <label for="bac">Bachelor</label>
      <input id="bac" name="course" type="radio" value="4" />
      <label for="mas">Master</label>
      <input id="mas" name="course" type="radio" value="6" />
      <label for="mas">Doctorate</label>
      <input id="mas" name="course" type="radio" value="8" />
    </div>
    
    <h4>Please enter your potential start date (dd/mm/yyyy):</h4>
    <div>
      <input id="start-date" type="text" value="01/01/2013">  <!-- value setting for testing purposes only -->
    </div>
    <div> Breaks
      <select id="breakTime">
        <option value="0" selected>No break</option>
        <option value="1">1 week</option>
        <option value="2">2 weeks</option>
        <option value="3">3 weeks</option>
        <option value="4">4 weeks</option>
        <option value="5">5 weeks</option>
      </select>
    </div>
    <div>
      <input id="potential" type="button" value="See Your Potential Graduation Date">
      <input id="clear" type="reset" value="clear">
    </div>
    <div id="future-date">&nbsp;</div>
    </form>
    </body>
    </html>
    Happy Holidays!

  3. #3
    Join Date
    Dec 2012
    Posts
    81
    Thank you for that... that's exactly the direction I was going for. I have to adjust some of the times, but it's a great addition to what I already had.

    What I was trying to accomplish with Step#3 was basically what you helped with the 'Breaks', but with the input from the student being an integer (let's say 24 credits). That number, 24, would then be multiplied by a certain number of days or weeks per credit. That number, which should be translated to weeks, would then be subtracted from the graduation date, just like the 'Breaks' variable.


    Does that make any more sense?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Should be easily done if you provide the formula required to translate credits to days or weeks.

    What's the formula. Also are the credits in relation to semesters or quarters or some other term nomenclature?

  5. #5
    Join Date
    Dec 2012
    Posts
    81
    The formula is fairly straight forward...

    Each class that gets transferred in is transferred in as a class, and not credits.

    One class is equivelant to 5 weeks. So, if a student transfers in 5 classes worth of credits, that would be a total of 5 weeks off the end of the degree.

    I understand the concept and the math, just not how to put it together with what you've already written. I'm still fairly new to JS.

    ***
    Also, I’ve played around with your script a little and I’m trying to adjust something and can’t.

    The degree programs at this school are as follows… (for the most part)

    Associate’s Degree – 90 credits (2.5 years)
    Bachelor’s Degree – 180 credits (4.5 years)
    Masters Degree – 48 credits (1.5 years)

    How would I adjust for that?


    Thanks JMRKER!
    Last edited by jlnewnam; 12-19-2012 at 03:19 PM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Still a bit confused with your last post.

    1. If you have 1 class equivalent to 5 weeks, then would not 5 classes worth of credits be a total of 25 weeks off the end of the degree?

    2. Would 2.5 years be equivalent to 52+52+26 weeks (assuming 52 weeks per year)?
    Therefore, would it follow that there would be 90 credits / 130 weeks be 0.69231 credits per week?

    3. Lastly, assuming a full program for one individual,
    would a bachelor's degree take 7 years and 270 credits? Would master's be 8.5 years and 318 credits?

  7. #7
    Join Date
    Dec 2012
    Posts
    81
    Sorry about that!

    1. It should read 5 classes x 5 weeks = 25 weeks.

    2. The classes here are worth 4 credits each. Each class is 5 weeks.

    So... 92 credit degree / 4 credits per class = 23 classes.

    23 classes * 5 weeks per class = 115 weeks

    115 weeks / 52 = 2.21 years...so, I was wrong about 2.5 years as well. In turn, 92 credits / 115 weeks = .8 credits per week.

    3. I should have explained the degrees more clearly. The credits for the Bachelor include the credits required for the Associate degree ... so, the entire Bachelor degree is 180 credits, not 270. The Associate degree is actually 92 credits.

    Does that make more sense?

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    A lot more sense than before.

    I'll get back to you after I do some real work in my office.

    BTW, how do you handle sickness and holidays in relation to the credits/weeks/etc?

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    He's baaack!!!

    Check the calculations with some real numbers...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <style type="text/css">
    body { background-color:#f0f0f0; }
    form {
        width:500px;
        padding:20px;
        border:3px double rgb(128,128,128);
        margin:auto;
        text-align:center;
        background-color:#fff;
        color:rgb(64,64,64)
     }
    form div { margin:10px 0; }
    #future-date { line-height:1.3em; }
    </style>
    
    <script type="text/javascript">
    (function() {
       'use strict';
        var f;
      function init(){
        f=document.forms[0];
        f.reset();
        document.getElementById('potential').onclick=function() { gradDate(); }
        document.getElementById('clear').onclick=function() {
          document.getElementById('future-date').firstChild.nodeValue='\u00a0';
        }
      }
      function gradDate() {
        var start_date=document.getElementById('start-date').value;
    
        for(var c=0;c<f.elements.length;c++) {
          if((f[c].type=='radio')&&(f[c].checked==true)){
            var grad=parseFloat(f[c].value);
          }
        }
        if(isNaN(grad)) {
          alert('Please select your course');
          return;
        }
    
        var prevCredits = document.getElementById('xferCredits').value*1;  // get transfer credits
        var prevClasses = Math.floor(prevCredits/4);                       // covert to classes
        var prevWeeks = Math.floor(prevClasses*5*7);                       // convert classes to weeks
    
        var pattern=/^\d{1,2}\/\d{1,2}\/\d{4}$/; //Regex to validate date format (dd/mm/yyyy)
    
        if(pattern.test(start_date)) {
          var tarr = start_date.split('/');
          var begin = new Date(tarr[2], tarr[1]-1, tarr[0]);
          var gradDate = new Date(begin.getFullYear()+grad, begin.getMonth(), begin.getDate()); // add graduation years
          var wkDays = document.getElementById('breakTime').value*7;
          gradDate = gradDate.addDays(wkDays);
          gradDate = gradDate.addDays(-prevWeeks);
    
          document.getElementById('future-date').firstChild.nodeValue
            ='Your potential graduation date is : '+gradDate.toLocaleDateString();
          return;
        } else {
          alert('Invalid date format. Please Input in (dd/mm/yyyy) format!');
          return;
        }
      }
      window.addEventListener ? window.addEventListener('load',init,false) : window.attachEvent('onload',init);
    })();
    Date.prototype.addDays = function (days) {
      return new Date(this.getTime() + days*24*60*60*1000);
    }
    </script>
    </head>
    <body>
    
    <form action="#">
    
    <h4>Please select course...</h4>
    <div>
      <label for="ass">Associate</label>
      <input id="ass" name="course" type="radio" value="2" checked />
      <label for="bac">Bachelor</label>
      <input id="bac" name="course" type="radio" value="4" />
      <label for="mas">Master</label>
      <input id="mas" name="course" type="radio" value="6" />
    <!-- for future programs ???
      <label for="mas">Doctorate</label>
      <input id="mas" name="course" type="radio" value="8" />
    -->
    </div>
    
    <h4>Please enter your potential start date (dd/mm/yyyy):</h4>
    <div>
      <input id="start-date" type="text" value="01/01/2013">  <!-- value setting for testing purposes only -->
    </div>
    <div> 
      Transfer Credits (#)
      <input type="text" size="3" id="xferCredits" value="0">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Breaks
      <select id="breakTime">
        <option value="0" selected>No break</option>
        <option value="1">1 week</option>
        <option value="2">2 weeks</option>
        <option value="3">3 weeks</option>
        <option value="4">4 weeks</option>
        <option value="5">5 weeks</option>
      </select>
    </div>
    <div>
      <input id="potential" type="button" value="See Your Potential Graduation Date">
      <input id="clear" type="reset" value="clear">
    </div>
    <div id="future-date">&nbsp;</div>
    </form>
    </body>
    </html>

  10. #10
    Join Date
    Dec 2012
    Posts
    81
    Hey JMRKER...

    What snippet would I remove from this script if I only want to show the month/year and not the day, month, and year?

    Regards,

    Jared

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    Won't be as accurate (uses 1st of month to start counting)
    Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html lang="en">
            <head>
    
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="language" content="english"> 
            <meta http-equiv="Content-Style-Type" content="text/css">
            <meta http-equiv="Content-Script-Type" content="text/javascript">
    
            <title></title>
    
            <style type="text/css">
            body { background-color:#f0f0f0; }
            form {
                width:500px;
                padding:20px;
                border:3px double rgb(128,128,128);
                margin:auto;
                text-align:center;
                background-color:#fff;
                color:rgb(64,64,64)
             }
            form div { margin:10px 0; }
            #future-date { line-height:1.3em; }
            </style>
    
            <script type="text/javascript">
            (function() {
               'use strict';
                var f;
              function init(){
                f=document.forms[0];
                f.reset();
                document.getElementById('potential').onclick=function() { gradDate(); }
                document.getElementById('clear').onclick=function() {
                  document.getElementById('future-date').firstChild.nodeValue='\u00a0';
                }
              }
              function gradDate() {
                var start_date=document.getElementById('start-date').value;
    
                for(var c=0;c<f.elements.length;c++) {
                  if((f[c].type=='radio')&&(f[c].checked==true)){
                    var grad=parseFloat(f[c].value);
                  }
                }
                if(isNaN(grad)) {
                  alert('Please select your course');
                  return;
                }
    
                var prevCredits = document.getElementById('xferCredits').value*1;  // get transfer credits
                var prevClasses = Math.floor(prevCredits/4);                       // covert to classes
                var prevWeeks = Math.floor(prevClasses*5*7);                       // convert classes to weeks
    
                var pattern=/^\d{1,2}\/\d{4}$/; //Regex to validate date format (mm/yyyy)
    
                if(pattern.test(start_date)) {
                  var tarr = start_date.split('/');
                  var begin = new Date(tarr[1], tarr[0]-1,1);
                  var gradDate = new Date(begin.getFullYear()+grad, begin.getMonth(), begin.getDate()); // add graduation years
                  var wkDays = document.getElementById('breakTime').value*7;
                  gradDate = gradDate.addDays(wkDays);
                  gradDate = gradDate.addDays(-prevWeeks);
    
                  document.getElementById('future-date').firstChild.nodeValue
                    ='Your potential graduation date is : '+(gradDate.getMonth()+1)+'/'+gradDate.getFullYear();
                  return;
                } else {
                  alert('Invalid date format. Please Input in (mm/yyyy) format!');
                  return;
                }
              }
              window.addEventListener ? window.addEventListener('load',init,false) : window.attachEvent('onload',init);
            })();
            Date.prototype.addDays = function (days) {
              return new Date(this.getTime() + days*24*60*60*1000);
            }
            </script>
            </head>
            <body>
    
            <form action="#">
    
            <h4>Please select course...</h4>
            <div>
              <label for="ass">Associate</label>
              <input id="ass" name="course" type="radio" value="2" checked />
              <label for="bac">Bachelor</label>
              <input id="bac" name="course" type="radio" value="4" />
              <label for="mas">Master</label>
              <input id="mas" name="course" type="radio" value="6" />
            <!-- for future programs ???
              <label for="mas">Doctorate</label>
              <input id="mas" name="course" type="radio" value="8" />
            -->
            </div>
    
            <h4>Please enter your potential start date (mm/yyyy):</h4>
            <div>
              <input id="start-date" type="text" value="01/2013">  <!-- value setting for testing purposes only -->
            </div>
            <div> 
              Transfer Credits (#)
              <input type="text" size="3" id="xferCredits" value="0">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              Breaks
              <select id="breakTime">
                <option value="0" selected>No break</option>
                <option value="1">1 week</option>
                <option value="2">2 weeks</option>
                <option value="3">3 weeks</option>
                <option value="4">4 weeks</option>
                <option value="5">5 weeks</option>
              </select>
            </div>
            <div>
              <input id="potential" type="button" value="See Your Potential Graduation Date">
              <input id="clear" type="reset" value="clear">
            </div>
            <div id="future-date">&nbsp;</div>
            </form>
            </body>
            </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles