Counting days from a string

November 10, 2021

I’m trying to get a date I put myself in my html. And calculate how many days it has been posted. My loop works until the second date then it returns the same as the first. I can’t seem to find the bug. I also haven’t included the part that then injects it back in to the html tag.

var today = new Date();// date today
var now = today.getDate()+'-'+(today.getMonth()+1)+'-'+today.getFullYear();//order my date in day-month-year

console.log(now);
var oldDatearr = document.querySelectorAll(".olddate");// takes old date from html and puts in array

for (let i = 0;i < oldDatearr.length;i++){

    let oldDate = new Date(oldDatearr[i].innerHTML); // takes the first date from the array
    let oldDateOrder = oldDate.getDate()+'-'+(oldDate.getMonth()+1)+'-'+ oldDate.getFullYear();//order old date with day-month-year

    console.log(oldDateOrder);

    const msPerDay = 24 * 60 * 60 * 1000;//days formule
    let daysLeft = Math.floor(parseInt(now) - parseInt(oldDateOrder) / msPerDay);//new date minus old date

    console.log(daysLeft + " days ago");


}

html

<div class="list-group shadow-lg">
              
                    <a href="#" target="_blank" class="list-group-item list-group-item-action" aria-current="true">
                        <div class=" d-flex w-100 justify-content-between">
                            <h5 class="mb-1">test</h5>
                            <small class="olddate text-muted">11/01/2021</small>
                        </div>
                        <p class="mb-1">test</p>
                    </a>
                    <a href="#" target="_blank" class="list-group-item list-group-item-action sbgrey">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">test</h5>
                            <small class="olddate text-muted">11/02/2021</small>
                        </div>
                        <p class="mb-1">test</p>
                    </a>
                    <a href="#" target="_blank" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">test</h5>
                            <small class="olddate text-muted">11/03/2021</small>
                        </div>
                        <p class="mb-1">test</p>
                    </a>
                    <a href="#" target="_blank" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">test</h5>
                            <small class="olddate text-muted">11/03/2021</small>
                        </div>
                        <p class="mb-1">test</p>
                    </a>
 </div>

>Solution :

Formatting the date as a string is useless because you can’t do math with a date like "10/11/2001". Remove all that formatting code.
Order of operations dictates that you need to put the subtraction in parenthesis before you divide.

This code works:

var today = new Date();
var oldDatearr = document.querySelectorAll(".olddate");

for (let i = 0; i < oldDatearr.length; i++) {
  let oldDate = new Date(oldDatearr[i].innerHTML);
  const msPerDay = 24 * 60 * 60 * 1000;
  let daysLeft = Math.floor((today - oldDate) / msPerDay);
  console.log(daysLeft + " days ago");
}

<div class="list-group shadow-lg">

  <a href="#" target="_blank" class="list-group-item list-group-item-action" aria-current="true">
    <div class=" d-flex w-100 justify-content-between">
      <h5 class="mb-1">test</h5>
      <small class="olddate text-muted">11/01/2021</small>
    </div>
    <p class="mb-1">test</p>
  </a>
  <a href="#" target="_blank" class="list-group-item list-group-item-action sbgrey">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">test</h5>
      <small class="olddate text-muted">11/02/2021</small>
    </div>
    <p class="mb-1">test</p>
  </a>
  <a href="#" target="_blank" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">test</h5>
      <small class="olddate text-muted">11/03/2021</small>
    </div>
    <p class="mb-1">test</p>
  </a>
  <a href="#" target="_blank" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">test</h5>
      <small class="olddate text-muted">11/03/2021</small>
    </div>
    <p class="mb-1">test</p>
  </a>
</div>