Subtract 7 days from moment date getting Invalid Date

Question

Trying to subtract 7 days from date using moment.js. But, invalid date in the console. I'm first consoling the date in the span element with data-date attribute then creating a new variable and assigning it the data minus 7. My end goal is to add an event handler to a button to only display dates that are within the last 7 days. Codepen: https://codepen.io/centem/pen/ExYEoLj

var dataset = [
  {date: "2019-04-15T15:10:45Z", number: 76},
  {date: "2019-02-12T11:21:10Z", number: 23},
  {date: "2019-01-12T10:20:16Z", number: 14},
  {date: "2019-01-09T09:20:16Z", number: 7},
  {date: "2019-07-11T11:01:05Z", number: 101},
  {date: "2019-08-29T11:01:05Z", number: 121},
  {date: "2019-09-03T14:31:05Z", number: 130},
  {date: "2019-09-10T11:01:05Z", number: 135},
  {date: "2019-09-11T14:01:05Z", number: 140},
  {date: "2019-09-01T11:01:05Z", number: 115}
];

var options = { 
  valueNames : ['date', 'number', 'filter'] 
};
var ResultDiv = new List('ResultDiv', options);

for(let node of document.querySelectorAll('[data-date]')){
  let d = moment(new Date(node.dataset.date)).format("MMM Do YYYY hh:mm:ss");
  //node.innerText = moment(new Date(node.dataset.date)).format("MMM Do YYYY hh:mm:ss");
  node.innerText = d;
  //console.log(node.innerText);
}

//moment().subtract(7, 'days');
//var d = new Date();
//var d2 = new Date();
//var d2 = d2.setDate( d.getDate() - 10 );
//d = moment(d).format("MMM Do YYYY hh:mm:ss");
//document.write( d )
//document.write("<br>");
//d2 = moment(d2).format("MMM Do YYYY hh:mm:ss");
//document.write( d2 );

function formatDate(d) {
  return moment(d).format("MMM Do YYYY hh:mm:ss");
}
/*
function addElements() {
  let ul = document.getElementById("ul");
  
  for (let i = 0; i < dataset.length; i++) {
    let li = document.createElement("li");
    let outerDateSpan = document.createElement("span");
    let innerDateSpan = document.createElement("span");
    let numberSpan = document.createElement("span");
    let d = formatDate(dataset[i].date);
    innerDateSpan.setAttribute("data-date", d);
    innerDateSpan.classList.add("date");
    innerDateSpan.innerHTML = d;
    numberSpan.classList.add("number");
    numberSpan.innerHTML = dataset[i].number;
    outerDateSpan.appendChild(innerDateSpan);
    li.appendChild(outerDateSpan);
    li.appendChild(numberSpan);
    ul.appendChild(li);
  }
}
*/
//addElements();

function last7() {
  for(let node of document.querySelectorAll('[data-date]')){
    console.log("***********************************");
    let d = node.innerText;
    console.log(d);
    let d2 = moment(d).subtract(7, 'days');
    console.log(d2);
    //console.log( moment(node.innerText).subtract(7, 'days') );
  }
}

last7();

ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
span {
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="ResultDiv">
  <input class="search" placeholder="Search"/>
  <button class="sort" data-sort="date">
    Sort by Date
  </button>
  <button class="sort" data-sort="number">
    Sort by Number
  </button>
  <button>Last 7 Days</button>
  <button>Last 30 Days</button>

    <ul class="list" id="ul">
      <li>
        <span class="date"><span data-date="2019-04-15T15:10:45Z"></span>
            </span>
        <span class="number">76</span>
      </li>
      <li>
        <span class="date"><span data-date="2019-02-12T11:21:10Z"></span></span>
        <span class="number">23</span>
      </li>
            <li>
              <span class="date"><span data-date="2019-01-12T10:20:16Z"></span></span>
        <span class="number">14</span>
      </li>
      <li>
        <span class="date"><span data-date="2019-01-09T09:20:16Z"></span></span>
        <span class="number">7</span>
      </li>
      <li>
        <span class="date"><span data-date="2019-07-11T11:01:05Z"></span></span>
        <span class="number">101</span>
      </li>
            <li>
              <span class="date"><span data-date="2019-08-29T11:01:05Z"></span></span>
        <span class="number">121</span>
      </li>
      <li>
              <span class="date"><span data-date="2019-09-03T14:31:05Z"></span></span>
        <span class="number">130</span>
      </li>
            <li>
              <span class="date"><span data-date="2019-09-10T11:01:05Z"></span></span>
        <span class="number">130</span>
      </li>
    </ul>

</div>

Are you sure it's the subtraction that fails and not the initialisation itself - `moment(d)`? — VLAZ, Sep 12 '19 at 06:44
Running the example - yeah, that's EXACTLY what that warning is about. You are feeding moment some date but without a known format to it, it doesn't necessarily know what to do with it. So, it fails. It's not the subtraction itself. — VLAZ, Sep 12 '19 at 06:49
maybe this can help https://stackoverflow.com/questions/25888182/moment-js-how-to-subtract-7-days-from-current-date Try replacing 'days' with 'd' in subtract method — Karan Tewari, Sep 12 '19 at 06:59

score 0 · Answer 1 · answered Sep 12 '19 at 06:58

In your function last7(), change

let d = node.innerText;

to

let d = node.getAttribute("data-date");

Because, innerText will give you an already formatted value which will not be recognized by moment, instead use what you already have in your data attribute.

See the working code below.

var dataset = [
  {date: "2019-04-15T15:10:45Z", number: 76},
  {date: "2019-02-12T11:21:10Z", number: 23},
  {date: "2019-01-12T10:20:16Z", number: 14},
  {date: "2019-01-09T09:20:16Z", number: 7},
  {date: "2019-07-11T11:01:05Z", number: 101},
  {date: "2019-08-29T11:01:05Z", number: 121},
  {date: "2019-09-03T14:31:05Z", number: 130},
  {date: "2019-09-10T11:01:05Z", number: 135},
  {date: "2019-09-11T14:01:05Z", number: 140},
  {date: "2019-09-01T11:01:05Z", number: 115}
];

var options = { 
  valueNames : ['date', 'number', 'filter'] 
};
var ResultDiv = new List('ResultDiv', options);

for(let node of document.querySelectorAll('[data-date]')){
  let d = moment(new Date(node.dataset.date)).format("MMM Do YYYY hh:mm:ss");
  node.innerText = d;
}

function formatDate(d) {
  return moment(d).format("MMM Do YYYY hh:mm:ss");
}


function last7() {
  for(let node of document.querySelectorAll('[data-date]')){
    console.log("***********************************");
    let d = node.getAttribute("data-date");
    console.log(d);
    let d2 = moment(d).subtract(7, 'days');
    console.log("d2", d2);
    //console.log( moment(node.innerText).subtract(7, 'days') );
  }
}

last7();

ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
span {
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="ResultDiv">
  <input class="search" placeholder="Search"/>
  <button class="sort" data-sort="date">
    Sort by Date
  </button>
  <button class="sort" data-sort="number">
    Sort by Number
  </button>
  <button>Last 7 Days</button>
  <button>Last 30 Days</button>

    <ul class="list" id="ul">
      <li>
        <span class="date"><span data-date="2019-04-15T15:10:45Z"></span>
            </span>
        <span class="number">76</span>
      </li>
      <li>
        <span class="date"><span data-date="2019-02-12T11:21:10Z"></span></span>
        <span class="number">23</span>
      </li>
            <li>
              <span class="date"><span data-date="2019-01-12T10:20:16Z"></span></span>
        <span class="number">14</span>
      </li>
      <li>
        <span class="date"><span data-date="2019-01-09T09:20:16Z"></span></span>
        <span class="number">7</span>
      </li>
      <li>
        <span class="date"><span data-date="2019-07-11T11:01:05Z"></span></span>
        <span class="number">101</span>
      </li>
            <li>
              <span class="date"><span data-date="2019-08-29T11:01:05Z"></span></span>
        <span class="number">121</span>
      </li>
      <li>
              <span class="date"><span data-date="2019-09-03T14:31:05Z"></span></span>
        <span class="number">130</span>
      </li>
            <li>
              <span class="date"><span data-date="2019-09-10T11:01:05Z"></span></span>
        <span class="number">130</span>
      </li>
    </ul>

</div>

void I'm not getting the same output even though I copied your last7 function exactly. — sgoodman, Sep 12 '19 at 07:50

Subtract 7 days from moment date getting Invalid Date

1 Answers1