Adding Day's To an Input Date

Ask the community
,
1

I am trying to create a “date calculator” to add a days to an input date.
This is the code I have so far:

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

and I am still not getting it through. Please help :slight_smile:

2

Hi Mary,

To accomplish this you’ll need to use a combination of Wix Elements and $w to select and manipulate your website with your code.

The $w programming model is similar to coding with jQuery and is the key to developing on our platform.

Check out the resources above as well as the Velo Reference to learn more about the APIs you can use to create your desired functionality.

3

Hey Thomas!

Thank you so much for your response. My follow-up question is when I simply add an embed this code directly to the website page

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

I get this

762×630 27.9 KB

which I am actually fine with! However, I am needing to add the rest of the coding to actually add the math function to make it work. Is this where the $w programming comes in?

4

While it is definitely possible to create a form with native html elements using Custom Elements to interact with the $w programming model, I would instead recommend just building this widget out of Wix Elements.

A combination of Text , TextInput , Date Picker , and Button elements with code will allow you to build your desired functionality in a more efficient way.