1

I can't seem to find anything recent, and it's possible I might be behind the times and am just searching the wrong terms and such so I am hoping someone here can be helpful or might have some suggestions.

I have two date fields, one an invoice date and one a due date. What I'd like to happen is that I choose or change a date in the invoice date and the due date is automatically updated to reflect a date 30 days after the invoice date.

<input id="dateInvoice" type="date"/>
<input id="dueDate" type="date"/>
Matthew
  • 1,565
  • 6
  • 32
  • 56
  • 1
    You want to add 30 days or 1 month? Both are not identical. – gurvinder372 Nov 23 '17 at 05:36
  • 2
    getDate / setDate is all you'll need - javascript handles overflows for you – Jaromanda X Nov 23 '17 at 05:38
  • @gurvinder372 - you are correct, I have altered my question to reflect a uniform question – Matthew Nov 23 '17 at 05:38
  • 1
    *I have two date fields, one an invoice date and one a due date* Are these input date type tags? Can you share relevant markup? – gurvinder372 Nov 23 '17 at 05:39
  • 1
    `dueDate = new Date(invoideDate); dueDate.setDate(dueDate.getDate() + 30)` – Rajesh Nov 23 '17 at 05:40
  • @gurvinder372 - I have updated the question with the markup. Currently, they are date fields, but that can be changed if necessary. What I'd like is to use some form of uniformity (either through the browser date picker or jquery datepicker) rather than a text field just to make sure there isn't any confusion by an end user. – Matthew Nov 23 '17 at 06:01
  • @Matthew So, your question is how to retrieve a date object from user-input in the input type-date field? – gurvinder372 Nov 23 '17 at 06:29
  • @gurvinder372 - yes, and then the dueDate field is updated using the invoiceDate value (plus 30 days) that was put in by the user. – Matthew Nov 23 '17 at 06:39

3 Answers3

3

You can follow this approach

  • parse the input date value to date using split and date constructor
  • Add days using setDate
  • Set the new date value to output date.

Demo

document.querySelector("#addDays").addEventListener("click", function() {
  var invoiceDate = document.querySelector("#invoiceDate").value;
  var days = Number(document.querySelector("#days").value);
  var dueDateElement = document.querySelector("#dueDate");

  if (!isNaN(days) && invoiceDate.length) {
    invoiceDate = invoiceDate.split("-");
    invoiceDate = new Date(invoiceDate[0], invoiceDate[1] - 1, invoiceDate[2]);
    invoiceDate.setDate(invoiceDate.getDate() + days);
    dueDateElement.valueAsDate = null;
    dueDateElement.valueAsDate = invoiceDate;
    //console.log(invoiceDate, dueDateElement.value);
  }
});
Invoice Date <input type="date" id="invoiceDate"> <br><br> Add Days <input type="text" id="days"> <br><br>

<button id="addDays">Add Days</button> <br><br> Due Date <input type="date" id="dueDate">
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • I like this one, so I know that means my request is possible in some form. Using the above code as a template, does there look to be a way to perform the same action automatically after the invoice date is changed? – Matthew Nov 23 '17 at 07:13
  • You can invoke the same code at the `change` event of your *invoice date* as well. – gurvinder372 Nov 23 '17 at 07:14
  • Hi - I got yours to work in the way I needed using the change event, but it looks like mine (as well as the demo you provided run into a problem when the new year is introduced. For example, try 12/22/2017 as the invoice date, and the days as 30 and you'll see that the due date will stay at mm/dd/yyyy – Matthew Nov 23 '17 at 07:38
  • Oddly enough, the same problem occurs with any date before 11/10/2017 as well. – Matthew Nov 23 '17 at 07:41
  • Ohh, let me check then. – gurvinder372 Nov 23 '17 at 07:43
  • @Matthew It is working now. Once you have set a date once to date control programmatically, you need to clear the same before setting a new one. It is fixed, please check. – gurvinder372 Nov 24 '17 at 05:48
1

You can create the date in Javascript like this

var date = new Date(2017,11,27,11,14,00,00)

you can add 30 days to this date to get the date (after 30 days)

after30days = date.setDate(cur.getDate() + 30);
Anirudha Gupta
  • 9,073
  • 9
  • 54
  • 79
  • How would I go about using this after inputting / updating the invoice date? I can't seem to get a date field to work with changing the date field. – Matthew Nov 23 '17 at 05:58
  • @Matthew which plugin you used for Date ?, if it's simple input date, try document.getElementById("date").value – Anirudha Gupta Nov 23 '17 at 06:38
  • So would this be correct for a final output? It seems it doesn't want to do anything with the due date: `` – Matthew Nov 23 '17 at 07:04
  • the value must be in "yyyy-MM-dd" format when we set the value to input date, use this function to get the last step done https://stackoverflow.com/a/3067896/713789 – Anirudha Gupta Nov 23 '17 at 07:16
0

you can split the javascript date into month day and year and add simple month to it as

var invoiceDate = new Date("01/31/2017");
var dueDate= invoiceDate.addMonths(1);
Vikas Suryawanshi
  • 522
  • 1
  • 5
  • 12
  • or u can add same gor days like : var dueDate= invoiceDate.addDays(30); – Vikas Suryawanshi Nov 23 '17 at 05:48
  • How would I go about using this after inputting / updating the invoice date? I can't seem to get a date field to work with changing the date field. – Matthew Nov 23 '17 at 05:58
  • i didnt get your your question will you please explain me what exactl wou want to say – Vikas Suryawanshi Nov 23 '17 at 06:00
  • So an example would be, as someone adds or changes the invoice date field, the due date field will automatically be updated with the add 30 days (or one month, I don't really care so long as I get some form of a solution) – Matthew Nov 23 '17 at 06:02
  • @Matthew you can use onchange event if you it's input date, see https://stackoverflow.com/a/40762843/713789 – Anirudha Gupta Nov 23 '17 at 06:39
  • So would this be correct for a final output? It seems it doesn't want to do anything with the due date: `` – Matthew Nov 23 '17 at 07:05