0

I'm using a CMS system that works alongside a backend that we must use. I'm trying to have it display a production lead time date such as www.customink.com. Current day +10 business days I'm using a HTML widget in this custom CMS, so I'm not sure if that is relevant. I'm struggling getting it to show up, and I really have no idea what I'm doing. I tried my best lol. Here's what I have thus far.

EDIT: Also, If I want it to only display M-F how do I go about that? I want it to read - Guaranteed by Fri, Oct 11.

<html>
<body>

<script>
document.getElementById("p1").innerHTML = newDate;

function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
var newDate = addDays(new Date(), 10);;

</script>


</body>
</html>
Hunter Strine
  • 1
  • 1
  • what CMS are you using? I have some experience with Wix and building in heavy javascript/Node into it. each of these CMS have developer docs which you can use to help guide you. – sao Sep 28 '19 at 15:56
  • 1
    @sao It's called DecoNetwork, it's more of a hybrid CMS/ERP system – Hunter Strine Sep 28 '19 at 17:02

1 Answers1

1

document.getElementById("p1").innerHTML = newDate;

In this statement, what you are doing is trying to find the DOM element with id p1 and then setting the value of newDate variable as its value. Therefore you should define an element with such id before your script block.

Then you are declaring and setting the value of the newDate after you have set the value for the above element. But you should do it before that.

See the fixed code below. (I have used a <div> element as the p1 element. But you can use any other options such as <span>, <h1>, <h2>, etc. based on your requirement.) 

<html>
<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
</head>
<body>

<div id='p1'></div>

<script>
var newDate = addDays(new Date(), 10);
document.getElementById("p1").innerHTML = formatDate(newDate);

function addDays(theDate, days) {
  //return new Date(theDate.getTime() + days*24*60*60*1000);
  return moment(theDate).add(days, 'd').toDate();
  
}

function formatDate(date) {
  return moment(date).format('[Guaranteed by] ddd, MMM DD');
}


</script>




</body>
</html>
Udith Gunaratna
  • 2,091
  • 1
  • 13
  • 17
  • `
    ` is not a self closing tag
     – charlietfl Sep 28 '19 at 15:23
  • Ah! That makes perfect sense. This worked, thank you! As for formatting how the date displays, where do I adjust that? Clearly I have no idea how to code Javascript! – Hunter Strine Sep 28 '19 at 15:24
  • If for instance I wanted it to stay within M-F and is displayed as such - Guaranteed by Fri, Oct 11. – Hunter Strine Sep 28 '19 at 15:27
  • @HunterStrine Better to use a date manipulation library such as MomentJS (https://momentjs.com/) or DateJS (https://github.com/datejs/Datejs) for that. If you want to do it without any library, please see the below answer. https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date – Udith Gunaratna Sep 28 '19 at 15:28
  • @UdithGunaratna is it possible to use a library with a CMS that is not on our servers? I cannot access any servers etc. – Hunter Strine Sep 28 '19 at 15:30
  • Yes, for example, see below on how to add MomentJS to your web page. https://momentjs.com/docs/#/use-it/browser/ – Udith Gunaratna Sep 28 '19 at 15:36
  • I have updated my answer showing how to use MomentJS to format the date as you required. Please refer to the below for MomentJS formatting options. https://momentjs.com/docs/#/displaying/ – Udith Gunaratna Sep 28 '19 at 15:42
  • Also if you are going to use MomentJS, you can also use it to add days rather than doing it yourself. I have updated the `addDays` function with the use of moment. See this for date manipulation capabilities. https://momentjs.com/docs/#/manipulating/ – Udith Gunaratna Sep 28 '19 at 15:50