Question

我试图在outputDate类中使用momentJS美丽地显示inputDate，但是我错过了一些使它可能在脚本本身中起作用的东西。

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

<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>

Answer 1

您只需要一个for..loop即可完成工作，请注意，我已经使用nextElementSibling来获取{{1}中每个p.outputDate的下一个p.inputDate }数组：

inputDates

(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;
}

Answer 2

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

您的问题在这里：

1）<Map center={position} zoom={this.state.zoom}> <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' /> <ExtendedMarker position={position}> <Popup autoClose={false}> A pretty CSS3 popup. Easily customizable. </Popup> </ExtendedMarker> <ExtendedMarker position={position2}> <Popup position={position2} autoClose={false}> A pretty CSS3 popup. Easily customizable. </Popup> </ExtendedMarker> </Map>

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

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

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

您不需要var moDate[i] = moment(inputDates[i], "YYYY-MM-DD hh:mm:ss");中的[i]部分，因为您要循环一个数组并分别为每个数组项创建唯一的moDate。

我也删除了内部循环，这是多余的。

实时演示：

the moDate[i]

(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");
    }
  }

)();

使用momentjs和getElementsByClassName

2 个答案: