Отображение дат с использованием моментов и getElementsByClassName - PullRequest
Новая
       30

Отображение дат с использованием моментов и getElementsByClassName

0 голосов
/ 08 ноября 2019

Я пытаюсь красиво отобразить inputDate с помощью momentJS в классе outputDate, но мне не хватает чего-то, чтобы это работало, вероятно, в самом скрипте.

Чтобы понять код, идея состоит в том, чтобы красиво отобразить,для каждой «статьи» - дата в выходном 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>

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Исправлена ​​ваша проблема. Проверьте полный рабочий пример кода здесь .

Ваши проблемы здесь:

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

вам не нужна часть [i] в the moDate[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>
0 голосов
/ 08 ноября 2019

Вам нужен только один for..loop для выполнения работы, обратите внимание, что я использовал nextElementSibling, чтобы получить следующие 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;
}
<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>
...