Adding days to today’s date

drameller · 10-03-2012, 11:51 PM

I have a script I pieced together from this forum and have hit a wall so to speak—I was hoping I could get some input. I wish to have a dropdown menu containing date options (15 days, 30 days, 45 days, 60 days…) When a selection is made, a text field appears next to your selection containing the difference in your selection vs the current date. So for example. If today was January 1st, and you selected 30 days, the box would show Jan 31st. I’ve managed to make this work for only the first date selection option, any other date selection shows the result for the first option only. Ultimately what I would like it to list the corresponding date given the 15/30/45/60 day selection.Hoping I could get some assistance. Thank you very much!

Code:

<BODY onload="init()">
<script language="JavaScript"><!--
function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}
//--></script>

<form name="frm" id="frm">
<select id="dropdown">
<option value="None">Select a Date</option>
<option value="text1">15 Days from Now</option>
<option value="text2">30 Days from Now</option>
<option value="text3">45 Days from Now</option>
<option value="text3">60 Days from Now</option>

</select>
<input type="text" id="mytext" size=60>
</form>
</BODY>
</HTML>

<script type="text/javascript">
var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');

mydropdown.onchange = function(){
mytextbox.value= addDays(new Date(),+15);
}
</script>

Old Pedant · 10-04-2012, 12:38 AM

Working too hard.

Code:

<!DOCTYPE html>
<html>
<body>
<form id="frm">
<select name="dropdown">
<option value="0">Select a Date</option>
<option value="15">15 Days from Now</option>
<option value="30">30 Days from Now</option>
<option value="45">45 Days from Now</option>
<option value="60">60 Days from Now</option>
</select>
<input type="text" name="mytext" size=60>
</form>
<script type="text/javascript">
(
  function( )
  {
      var form = document.getElementById("frm");
      var mytextbox = form.mytext;
      var mydropdown = form.dropdown;
      mydropdown.onchange = 
          function( )
          {
             var theDate = new Date();
             theDate.setDate( theDate.getDate() + Number(this.value) );
             var pretty = (theDate.getMonth()+1) + "/" + theDate.getDate() + "/" + theDate.getFullYear();
             mytextbox.value = pretty;
          }
  }
)( );
</script>
</body>
</html>

Change the code for pretty to format the date however you want it.

Philip M · 10-04-2012, 07:48 AM

Another variant:-

Code:

<html>
<head>
</head>
<body>

<select id="myselectbox">
<option value="3">3 days</option>
<option value="10">10 days</option>
<option value="20">20 days</option>
<option value="30">30 days</option>
</select>

<input type="button" value="Add date" onclick="return addDate('Thursday, 31 December, 2012');" />
<input type="button" value="Add date" onclick="return addDate(new Date());" />
<br><br>
<input type = "text" id = "mytextbox" readonly>

<script type="text/javascript">
function addDate(addtoDate) {
var orignaltime = new Date(addtoDate).getTime();
var dropdowndateinMS = document.getElementById("myselectbox").value * 86400 * 1000;//day x seconds x milliseconds
var addedtime = orignaltime + dropdowndateinMS ;
var addedTimeInProperFormat = new Date(addedtime);
addedTimeInProperFormat = addedTimeInProperFormat.toDateString()
document.getElementById("mytextbox").value = addedTimeInProperFormat;
}
</script>

</body>
</html>