How to add 31 days to a date inputted by the user

Question

So I'm trying to make a period counter (cliche) and I'm also beginner at HTML and Javascript so bear with me. I made it so the user can put in the date that their period started, and I want to add 31 to the amount of days they entered so it comes out as a date. My script so far:

  function theDate() {
var m = document.getElementById("inmonth").value;
Number(m).toString();
var d = document.getElementById("inday").value;
var y = document.getElementById("inyear").value;
var nd = new Date(m + "/" + d + "/" + y);
var thirtyDaysLater = 31;
var fstart = nd.setDate(nd.getDate() + thirtyDaysLater);
document.getElementById("enddate").innerHTML = "Last Period End Date: " + 
nd;
document.getElementById("nextdate").innerHTML = "Next Period Start Date: " + 
fstart;

Possible duplicate of [Add days to JavaScript Date](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — kyle, Oct 13 '17 at 20:59
@kyle—not really a duplicate, the OP's main issue is the unexpected return from *setDate*. Using the built-in parser is also an issue, but it's not causing a problem in this case. — RobG, Oct 13 '17 at 22:12

score 0 · Answer 1 · answered Oct 13 '17 at 21:09

definitely a duplicate but setDate both returns a number (the number of seconds since X passed) and modifies the date, so you'd want to do something like this.

 // After setting nd and thirty days later
 var fstart = new Date(nd); //copy the date

 fstart.setDate(fstart.getDate() + thirtyDaysLater);
 // Now fstart contains the modified date and nd contains the initial one.

From there just use as you want.

In short

var a = new Date(b) // date Object a copy of b
a.setDate(num) // Returns a number (which identifies the date) and modifies a
b = new Date(a.setDate(num)) // a is modified, b is now a copy of a.

and for funsies

// a contains the current date  - 30 days (it properly accounts for months)
var a = new Date(new Date().setDate(new Date().getDate() - 30));

score 0 · Answer 2 · answered Oct 13 '17 at 22:10

You should not use the built-in parser. Rather then building a string, giving it to an unreliable parser and hoping you get a consistent result, just give the parts directly to the Date constructor.

Also, setDate modifies the date in place, so there's no need for fstart:

function theDate() {
  var y = document.getElementById("inyear").value;
  var m = document.getElementById("inmonth").value;
  var d = document.getElementById("inday").value;

  var nd = new Date(y, m-1, d);
  document.getElementById("enddate").innerHTML = "Last Period End Date: " + nd.toString();

  var thirtyDaysLater = 31;
  nd.setDate(nd.getDate() + thirtyDaysLater);
  document.getElementById("nextdate").innerHTML = "Next Period Start Date: " + nd.toString();
}

Day: <input id="inday" value="5"><br>
Month: <input id="inmonth" value="10"><br>
Year: <input id="inyear" value="2017"><br>
<button onclick="theDate()">Calculate</button>
<p id="enddate">
<p id="nextdate">

This doesn't do any validation of input, you may want to add that.

How to add 31 days to a date inputted by the user

2 Answers2