使用 momentjs 和 getElementsByClassName 显示日期答案

【问题标题】：Displaying dates using momentjs and getElementsByClassName使用 momentjs 和 getElementsByClassName 显示日期
【发布时间】：2019-11-08 15:56:41
【问题描述】：

我正在尝试在 outputDate 类中使用 momentJS 漂亮地显示 inputDate，但我错过了一些使它可能在脚本本身中工作的东西。

为了理解代码，我们的想法是为每个“文章”很好地显示输出 DIV 中的日期，该日期取自输入 DIV。 inputDate 的数量与 outputDate 的数量相同。

<html>
<head>
<meta charset="utf-8" />
<script src="moment-with-locales.js"></script>
<style>
.inputDate {diplay: none;}
</style>
</head>

<body>

<article>
<header>
    <p class="inputDate">2018-06-15 11:27:30</p>
    <p class="outputDate"></p>
</header>
<div id="question"><p>1.Lorem ipsum dolor sit amet ?</p></div>
<div id="answer"><p>1.Amet sit dolor ipsum lorem.</p></div>
</article>

<article>
<header>
    <p class="inputDate">2019-07-18 15:15:45</p>
    <p class="outputDate"></p>
</header>
<div id="question"><p>2.Lorem ipsum dolor sit amet ?</p></div>
<div id="answer"><p>2.Amet sit dolor ipsum lorem.</p></div>
</article>

<article>
<header>
    <p class="inputDate">2019-08-14 10:23:00</p>
    <p class="outputDate"></p>
</header>
<div id="question"><p>3.Lorem ipsum dolor sit amet ?</p></div>
<div id="answer"><p>3.Amet sit dolor ipsum lorem.</p></div>
</article>

<script type="text/javascript">
    (function()
    {
        // get the input date from inputDate class element
        var inputDates = document.getElementsByClassName("inputDate").innerHTML;
        for (var i = 0; i < inputDates.length; i++) {
            // use moment() with input value and a string format pattern as arguments
            var moDate[i] = moment(inputDates[i], "YYYY-MM-DD hh:mm:ss");
            // display the parsed date in a outputDate class element
            var outputDates = document.getElementsByClassName("outputDate");
            for (var j = 0; j < inputDates.length; j++) {
                // use moment() with input value and a string format pattern as arguments
                outputDates[j].innerHTML = moDate[i].locale("fr").format("LLL");
                }
        }
    }

    )();
</script>

</body>
</html>

【问题讨论】：

一方面，您的 id 不是唯一的
你好本戈！您能否将链接或文本添加到您遇到的确切错误？另外，请阅读我们的tour page。
是的：在我的原始代码中，Javascript 似乎没有解析任何内容，因此它让 inputDate 按原样显示（因此在没有显示的测试期间使用它的 ISO-8601 扩展日期显示：无）。跨度>

标签： javascript html momentjs

【解决方案1】：

您只需要一个for..loop 来完成这项工作，请注意，我使用nextElementSibling 来获取inputDates 数组中每个p.inputDate 的下一个p.outputDate：

(function() {
    // get the input date from inputDate class element
    const inputDates = document.getElementsByClassName("inputDate");

    for (let i = 0; i < inputDates.length; i++) {
      // use moment() with input value and a string format pattern as arguments
      const moDate = moment(inputDates[i].innerHTML, "YYYY-MM-DD hh:mm:ss");

      // display the parsed date in a outputDate class element
      // use moment() with input value and a string format pattern as arguments
      const outputDate = inputDates[i].nextElementSibling;
      outputDate.innerHTML = moDate.locale("fr").format("LLL");
    }
  }

)();

.inputDate {
  diplay: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<article>
  <header>
    <p class="inputDate">2018-06-15 11:27:30</p>
    <p class="outputDate"></p>
  </header>
  <div id="question1">
    <p>1.Lorem ipsum dolor sit amet ?</p>
  </div>
  <div id="answer1">
    <p>1.Amet sit dolor ipsum lorem.</p>
  </div>
</article>

<article>
  <header>
    <p class="inputDate">2019-07-18 15:15:45</p>
    <p class="outputDate"></p>
  </header>
  <div id="question2">
    <p>2.Lorem ipsum dolor sit amet ?</p>
  </div>
  <div id="answer2">
    <p>2.Amet sit dolor ipsum lorem.</p>
  </div>
</article>

<article>
  <header>
    <p class="inputDate">2019-08-14 10:23:00</p>
    <p class="outputDate"></p>
  </header>
  <div id="question3">
    <p>3.Lorem ipsum dolor sit amet ?</p>
  </div>
  <div id="answer3">
    <p>3.Amet sit dolor ipsum lorem.</p>
  </div>
</article>

【讨论】：

您的两个回答都完美而简单，我喜欢您的解释，但我做得太过分了！我喜欢“nextElementSibling”，所以我会保留它。再次感谢你们。

【解决方案2】：

解决了您的问题。检查完整的工作codepen example here。

您的问题在这里：

1)var inputDates = document.getElementsByClassName("inputDate").innerHTML;

这里你没有按你的计划抓取一个数组，这个代码行的结果是未定义的，原因是“innerHTML”。您需要获取循环中每个项目的 innerHTML，如下所示：

var moDate = moment(inputDates[i].innerHTML, "YYYY-MM-DD hh:mm:ss");

2)var moDate[i] = moment(inputDates[i], "YYYY-MM-DD hh:mm:ss");

您不需要 the moDate[i] 中的 [i] 部分，因为您正在循环一个数组并为每个数组项分别创建唯一的 moDate。

我还删除了内部循环，它只是多余的。

现场演示：

(function() {
    // get the input date from inputDate class element
    var inputDates = document.getElementsByClassName("inputDate");
    var outputDates = document.getElementsByClassName("outputDate");

    for (var i = 0; i < inputDates.length; i++) {
      // use moment() with input value and a string format pattern as arguments
      var moDate = moment(inputDates[i].innerHTML, "YYYY-MM-DD hh:mm:ss");
      // display the parsed date in a outputDate class element

      outputDates[i].innerHTML = moDate.locale("fr").format("LLL");
    }
  }

)();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<article>
  <header>
    <p class="inputDate">2018-06-15 11:27:30</p>
    <p class="outputDate"></p>
  </header>
  <div class="question">
    <p>1.Lorem ipsum dolor sit amet ?</p>
  </div>
  <div class="answer">
    <p>1.Amet sit dolor ipsum lorem.</p>
  </div>
</article>

<article>
  <header>
    <p class="inputDate">2019-07-18 15:15:45</p>
    <p class="outputDate"></p>
  </header>
  <div class="question">
    <p>2.Lorem ipsum dolor sit amet ?</p>
  </div>
  <div class="answer">
    <p>2.Amet sit dolor ipsum lorem.</p>
  </div>
</article>

<article>
  <header>
    <p class="inputDate">2019-08-14 10:23:00</p>
    <p class="outputDate"></p>
  </header>
  <div class="question">
    <p>3.Lorem ipsum dolor sit amet ?</p>
  </div>
  <div class="answer">
    <p>3.Amet sit dolor ipsum lorem.</p>
  </div>
</article>

【讨论】：