Как сортировать <li>по месяцам, дате и году

Question

Мне нужна помощь в сортировке следующего списка, я провел некоторые исследования, пытаясь выполнить следующее с использованием JavaScript, но он не работает в качестве формата моей даты 20 января 2020

Код:

(function($) {
  var container = $(".sort-list");
  var items = $(".sort-item");

  items.each(function() {
    // Convert the string in 'data-event-date' attribute to a more
    // standardized date format
    var BCDate = $(this).attr("data-event-date").split("-");
    var standardDate = BCDate[1] + " " + BCDate[0] + " " + BCDate[2];
    standardDate = new Date(standardDate).getTime();
    $(this).attr("data-event-date", standardDate);

  });

  items.sort(function(a, b) {
    a = parseFloat($(a).attr("data-event-date"));
    b = parseFloat($(b).attr("data-event-date"));
    return a > b ? -1 : a < b ? 1 : 0;
  }).each(function() {
    container.prepend(this);
  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sort-list">
  <li class="sort-item" data-event-date="August 21 2020">August 21 2020</li>
  <li class="sort-item" data-event-date="April 25 2020">April 25 2020</li>
  <li class="sort-item" data-event-date="May 25 2020">May 25 2020</li>
  <li class="sort-item" data-event-date="September 25 2020">September 25 2020</li>
  <li class="sort-item" data-event-date="May 13 2020">May 13 2020</li>
  <li class="sort-item" data-event-date="June 1 2020">June 1 2020</li>
  <li class="sort-item" data-event-date="December 4 2020">December 4 2020</li>
</ul>

Answer 1

Вы пытаетесь использовать parseFloat, почему бы не new Date()?
Тогда вы можете просто сравнить даты, см. Ниже

Я удалил первое items.each, так как я не понял его полезность для вопроса здесь.

(function($) {
  var container = $(".sort-list");
  var items = $(".sort-item");

  items.sort(function(a, b) {
    let d1 = new Date($(a).data("event-date"));
    let d2 = new Date($(b).data("event-date"));
    return d1 > d2 ? -1 : d1 < d2 ? 1 : 0;
  }).each(function() {
    container.prepend(this);
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sort-list">
  <li class="sort-item" data-event-date="August 21 2020">August 21 2020</li>
  <li class="sort-item" data-event-date="April 25 2020">April 25 2020</li>
  <li class="sort-item" data-event-date="May 25 2020">May 25 2020</li>
  <li class="sort-item" data-event-date="September 25 2020">September 25 2020</li>
  <li class="sort-item" data-event-date="May 13 2020">May 13 2020</li>
  <li class="sort-item" data-event-date="June 1 2020">June 1 2020</li>
  <li class="sort-item" data-event-date="December 4 2020">December 4 2020</li>
</ul>

Но, как предлагается в комментариях и в другом ответе, лучше преобразовать строку, например, «21 августа 2020 года» в упрощенный формат даты что-то вроде «2020-08-21», тогда при преобразовании в реальный Date вы получите больше согласованности

Answer 2

Единственные форматы, которые Date() могут анализировать кроссплатформенные:

• 2011-10-10 (форма только для даты)
• 2011-10-10T14: 48: 00 (форма даты и времени)
• 2011-10-10T14: 48: 00.000 + 09: 00 (форма даты и времени с миллисекундами и часовым поясом)

Это из MDN Date() документация. Все, что может показаться работающим, может работать в вашем браузере, но не другие. (И ваш формат - «21 августа 2020 года» - выглядит так, как будто некоторые браузеры могут попытаться обработать его, возможно, но, конечно, это не кросс-браузерное решение.) Если ваш исходный формат - «21 августа 2020 года», вам, вероятно, потребуется добавьте некоторые логики c, чтобы проанализировать, например, "август" к "08" (название месяца к дополненный номер месяца). И аналогично добавьте меньше чем 10 дней месяца. Остерегайтесь любых решений, которые не следуют одному из трех вышеупомянутых кросс-браузерных форматов для каждой MDN.

Кроме этого, ваш код выглядит так, как будто он работает правильно - хотя вы хотите использовать parseInt() вместо parseFloat() при сравнении дат; getTime() всегда возвращает целое число. parseFloat() здесь - перебор.

Надеюсь, это поможет!