Фильтрация по дате (атрибуту datetime)

223

13 мая 2019, 05:40

Такой вопрос. Как сделать для данного примера фильтр по атрибуту datetime?

Чтоб я мог например выбрать месяц November в теге select и мне покажет за этот месяц посты.

Я начинающий в js и jquery. И с подобным никогда не сталкивался. Толкового решения найти не могу.

Возможно тут кто-то знает. Буду очень благодарен за решение и опыт на будущее.

И возможно ли такое? Или как сделать лучше?

.container { 
margin: 0; 
padding: 0; 
} 
 
.post-list { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
padding: 0; 
margin: 0; 
list-style: none; 
} 
 
.post-item { 
 flex-basis: calc(50% - 20px); 
 box-sizing: border-box; 
 margin: 10px; 
 background-color: black; 
 color: #fff; 
 padding: 10px; 
} 
 
h2 { 
margin: 0; 
} 
 
p:last-child { 
margin-bottom: 0; 
}

<div class="container container-filter"> 
  <div class="filter-block"> 
    <select class="filter-months"> 
      <option>November</option> 
      <option>October</option> 
      <option>March</option> 
      <option>January</option> 
    </select> 
  </div> 
  <ul class="post-list"> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 1</h2> 
      <p class="post-date" datetime="2017-11-01T13:29:31+00:00">November 1, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 2</h2> 
      <p class="post-date" datetime="2017-10-04T11:27:22+00:00">October 4, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 3</h2> 
      <p class="post-date" datetime="2017-03-21T15:52:31+00:00">March 21, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 4</h2> 
      <p class="post-date" datetime="2017-01-16T13:12:32+00:00">January 16, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
  </ul> 
</div>

Answer 1

Посмотрите пример.

Что здесь можно улучшить:

Дату (datetime) перенести на .post-item.
Добавить анимацию появления\скрытия.

const select = document.querySelector('.filter-months'); 
 
select.addEventListener('change', function() { 
  filterByMonth(select.value); 
}); 
filterByMonth(select.value); 
 
function filterByMonth(month) { 
  const valMonth = +month; 
  const items = document.querySelectorAll('.post-list .post-item'); 
  [...items].forEach((el) => { 
    const attr = el.querySelector('.post-date').getAttribute('datetime'); 
    const date = new Date(attr); 
    if (date.getMonth() === valMonth) { 
      el.classList.remove('hidden'); 
    } else { 
      el.classList.add('hidden'); 
    } 
  }); 
}

.container { 
  margin: 0; 
  padding: 0; 
} 
 
.post-list { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  padding: 0; 
  margin: 0; 
  list-style: none; 
} 
 
.post-item { 
  flex-basis: calc(50% - 20px); 
  box-sizing: border-box; 
  margin: 10px; 
  background-color: black; 
  color: #fff; 
  padding: 10px; 
} 
 
.post-item.hidden { 
  display: none; 
} 
 
h2 { 
  margin: 0; 
} 
 
p:last-child { 
  margin-bottom: 0; 
}

<div class="container container-filter"> 
  <div class="filter-block"> 
    <select class="filter-months"> 
      <option value='10' selected>November</option> 
      <option value='9'>October</option> 
      <option value='2'>March</option> 
      <option value='0'>January</option> 
    </select> 
  </div> 
  <ul class="post-list"> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 1</h2> 
      <p class="post-date" datetime="2017-11-01T13:29:31+00:00">November 1, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 2</h2> 
      <p class="post-date" datetime="2017-10-04T11:27:22+00:00">October 4, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 3</h2> 
      <p class="post-date" datetime="2017-03-21T15:52:31+00:00">March 21, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 4</h2> 
      <p class="post-date" datetime="2017-01-16T13:12:32+00:00">January 16, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
  </ul> 
</div>

Answer 2

Можно не прописывать value в select а вычислить в скрипте. Эффект "slow" можно удалить.

$('p.post-date').each(function () {  
    month=$(this).attr('datetime').split("-")[1]; 
    $(this).attr('filter',month); 
}); 
 
$('select.filter-months').on('change', function() { 
  $('p.post-date').parent().hide('slow'); 
  $('p.post-date[filter='+$(this).val()+']').parent().show('slow'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container container-filter"> 
  <div class="filter-block"> 
    <select class="filter-months"> 
      <option value=11>November</option> 
      <option value=10>October</option> 
      <option value=03>March</option> 
      <option value=01>January</option> 
    </select> 
  </div> 
  <ul class="post-list"> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 1</h2> 
      <p class="post-date" datetime="2017-11-01T13:29:31+00:00">November 1, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 2</h2> 
      <p class="post-date" datetime="2017-10-04T11:27:22+00:00">October 4, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 3</h2> 
      <p class="post-date" datetime="2017-03-21T15:52:31+00:00">March 21, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
    <li class="post-item"> 
      <h2 class="post-title">Привет мир - 4</h2> 
      <p class="post-date" datetime="2017-01-16T13:12:32+00:00">January 16, 2017</p> 
      <p class="post-desc">люлюлю</p> 
    </li> 
  </ul> 
</div>