Show delivery date in the future based on current date

Question

I need a javascript that can show a delivery date in the future based on what we type in the script. The javascript will be added manually to each product via wbbakery(formerly Visual Composer)

I.e. Current date in javascript 2018-02-07 Delivery time in days of the product(we add this manually for each product): 5-10

I'd like to show this on the site: If you order this product today you will receive your order 2018-02-12 - 2018-02-17

Thanks!

Why would you want to do this via JavaScript, instead of doing this inside the server-side template already? — CBroe, Feb 07 '18 at 11:38
I’m working with visual composer to create custom product pages. Each product have their own delivery time as we are drop shipping products from China. — doob, Feb 07 '18 at 12:41
There are questions here already on how to [*add days to a date*](https://stackoverflow.com/questions/9989382/how-can-i-add-1-day-to-current-date/9989458#9989458) and [*how to format dates*](https://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript). — RobG, Feb 07 '18 at 12:47

Berendschot · Accepted Answer · 2018-02-07T11:30:44.667

0

I think this JavaScript Date Reference will help you a lot.

Here's a working snippet.

// Get Todays date
$date = new Date();

// Set the number of days to be added
$numberOfDays = 5;

// Add this to the current date
$date.setDate($date.getDate() + $numberOfDays);

// Optional: Pretty print the date
function formatDate(date) {
  var d = new Date(date),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return [year, month, day].join('-');
}
$date = formatDate($date);

// Display the delivery date
document.getElementById("delivery-date").innerHTML = $date;

#delivery-date {
  font-weight: bold;
}

<p>
  Delivery date: <span id="delivery-date"></span>
</p>

edited Feb 07 '18 at 11:30

answered Feb 07 '18 at 11:05

Berendschot

3,026
1
21
43

Thanks. This is was i'm looking for. Do you happen to know how to implement this in to WP Bakery (formerly visual composer)? When i add the code i don't get any output of the date... – doob Feb 07 '18 at 12:00
It’s really strange. I follow the instructions to add js to visual composer, but I don’t get any output.. the first code you added printed a long date with time etc... – doob Feb 07 '18 at 12:43
Code-only answers aren't that helpful, especially when there are many questions and answers already regarding adding days to a date and formatting dates as strings. Please do not reference w3schools, [*MDN*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) and [*ECMA-262*](http://ecma-international.org/ecma-262/8.0/#sec-date-objects) are much better references. – RobG Feb 07 '18 at 12:48

Show delivery date in the future based on current date

1 Answers1