Future Date Calculator

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

jlnewnam

I am trying to accomplish a few things here…

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

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

JMRKER

I'm not sure I understand all the requirements of item #3, but this might get you started towards your goal.

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

jlnewnam

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?

JMRKER

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?

jlnewnam

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!

JMRKER

Still a bit confused with your last post.

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

jlnewnam

Sorry about that!

It should read 5 classes x 5 weeks = 25 weeks.
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.

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?

JMRKER

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?

JMRKER

He's baaack!!! :eek:

Check the calculations with some real numbers...

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

jlnewnam

Hey JMRKER...

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

Regards,

Jared

JMRKER

Won't be as accurate (uses 1st of month to start counting)

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