javascript - 从获取无效日期的那一刻起减去 7 天

Question

尝试使用 moment.js 从日期中减去 7 天。但是，控制台中的日期无效。我首先使用 data-date 属性来安慰 span 元素中的日期，然后创建一个新变量并将数据分配为负 7。我的最终目标是向按钮添加一个事件处理程序，以仅显示最后一个日期内的日期7天。代码笔： 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>

标签： javascriptlist.js

Answer 1

在你的函数last7()中，改变

let d = node.innerText;

至

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

因为，innerText 会给你一个已经格式化的值，它不会被瞬间识别，而是使用你在 data 属性中已有的值。

请参阅下面的工作代码。

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>