Такой вопрос. Как сделать для данного примера фильтр по атрибуту 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>