Как из календаря взять данные и по ним найти блок с такой же датой?

Question

На странице есть календарь и несколько блоков. У блоков есть дата когда они были созданы. Нужно что бы при клике на дату в календаре все блоки кроме тех что с нужной датой скрывались. Как подобное можно реализовать?

.card {
border: 1px solid black;
}
.calendar {
margin-top: 50px;
}

 <div class="post_area">
               <div class="card">
                  <div class="card_img">
                   <img src="image/winbox.jpg"></img>
                  </div>
                  <div class="card_info">
                      <h2>Знакомимся с WinBox</h2>
                      <p>Знакомимся с WinBox Давайте более</p>
                      <p>подробно познакомимся с утилитой</p>
                      <p>WinBox для управления устройствами</p>
                      <p>Mikrotik и операционной системой</p> 
                      <p>RouterOS (RoS).</p>
                      
                      <a>СМОТРЕТЬ ДАЛЬШЕ »</a>
                      
                  </div>
                  <div class="date">
                      <p>12.08.2022</p>
                  </div>
                     
               </div>
               
                <div class="card">
                  <div class="card_img">
                   <img src="image/blog1.jpg"></img>
                  </div>
                  <div class="card_info">
                      <h2>DNS СЕРВЕР – ЧТО ЭТО И КАК РАБОТАЕТ?</h2>
                      <p>Знаком ли тебе IP – адрес</p>
                      <p>172.217.7.206? Наверняка нет. И нам</p>
                      <p>нет. А это один из   </p>
                     
                      <a>СМОТРЕТЬ ДАЛЬШЕ »</a>
                     
                  </div>
                  <div class="date">
                      <p>12.08.2022</p>
                  </div>
                     
               </div>
                <div class="calendar">
                    <input type="date" атрибуты>
               </div>

Answer 1

Еще в вашем HTML коде ошибка. <img> тег не нужно закрывать.

const dateInput = document.querySelector('input[type="date"]');

dateInput.addEventListener('change', ({ target }) =>
{
    const [year, day, mounth] = target.value.split('-');
    filterCards(day, mounth, year);
});

function filterCards(day, mounth, year)
{
  const date = `${ day }.${ mounth }.${ year }`;
    const cards = [ ...document.querySelectorAll('.card') ];
    cards.forEach((card) => card.classList.toggle('card--hidden', (card.querySelector('.date p').textContent !== date)));
}

.card {
  border: 1px solid black;
}

.calendar {
  margin-top: 50px;
}

.card--hidden {
  display: none;
}

<div class="post_area">
    <div class="card">
        <div class="card_img">
            <img src="image/winbox.jpg">
        </div>
        <div class="card_info">
            <h2>Знакомимся с WinBox</h2>
            <p>Знакомимся с WinBox Давайте более</p>
            <p>подробно познакомимся с утилитой</p>
            <p>WinBox для управления устройствами</p>
            <p>Mikrotik и операционной системой</p>
            <p>RouterOS (RoS).</p>

            <a>СМОТРЕТЬ ДАЛЬШЕ »</a>
        </div>
        <div class="date">
            <p>12.08.2022</p>
        </div>
    </div>

    <div class="card">
        <div class="card_img">
            <img src="image/blog1.jpg">
        </div>
        <div class="card_info">
            <h2>DNS СЕРВЕР – ЧТО ЭТО И КАК РАБОТАЕТ?</h2>
            <p>Знаком ли тебе IP – адрес</p>
            <p>172.217.7.206? Наверняка нет. И нам</p>
            <p>нет. А это один из </p>

            <a>СМОТРЕТЬ ДАЛЬШЕ »</a>
        </div>
        <div class="date">
            <p>12.08.2022</p>
        </div>
    </div>
</div>

<div class="calendar">
    <input type="date">
</div>

Вариант с AirDatepicker:

// dateFormat лучше указать явно ибо он берется из локали пользователя
new AirDatepicker('#datapicker',
{
  dateFormat: 'dd.MM.yyyy',
  onSelect: ({formattedDate}) =>
  {
      const [day, mounth, year] = formattedDate.split('.');
      filterCards(day, mounth, year);
  }
});

function filterCards(day, mounth, year)
{
  const date = `${ day }.${ mounth }.${ year }`;
    const cards = [ ...document.querySelectorAll('.card') ];
    cards.forEach((card) => card.classList.toggle('card--hidden', (card.querySelector('.date p').textContent !== date)));
}

.card {
  border: 1px solid black;
}

.calendar {
  margin-top: 50px;
}

.card--hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/air-datepicker.css">

<div class="calendar">
    <input type="text" id="datapicker">
</div>

<hr>

<div class="post_area">
    <div class="card">
        <div class="card_img">
            <img src="image/winbox.jpg">
        </div>
        <div class="card_info">
            <h2>Знакомимся с WinBox</h2>
            <p>Знакомимся с WinBox Давайте более</p>
            <p>подробно познакомимся с утилитой</p>
            <p>WinBox для управления устройствами</p>
            <p>Mikrotik и операционной системой</p>
            <p>RouterOS (RoS).</p>

            <a>СМОТРЕТЬ ДАЛЬШЕ »</a>
        </div>
        <div class="date">
            <p>12.08.2022</p>
        </div>
    </div>

    <div class="card">
        <div class="card_img">
            <img src="image/blog1.jpg">
        </div>
        <div class="card_info">
            <h2>DNS СЕРВЕР – ЧТО ЭТО И КАК РАБОТАЕТ?</h2>
            <p>Знаком ли тебе IP – адрес</p>
            <p>172.217.7.206? Наверняка нет. И нам</p>
            <p>нет. А это один из </p>

            <a>СМОТРЕТЬ ДАЛЬШЕ »</a>
        </div>
        <div class="date">
            <p>12.08.2022</p>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Как из календаря взять данные и по ним найти блок с такой же датой?

Ответы (1 шт):