JSFiddle - React, Tailwind, and code Playground

Show hide item based on Date - Fliplet/Riverbed

by Hugo Carneiro

HTML

<div class="list">
  <ul>
    <li>
      <div class="list-desc">
        <div>Agenda 1</div>
        <span data-day="tuesday"></span>
      </div>
    </li>
    <li>
      <div class="list-desc">
        <div>Agenda 2</div>
        <span data-day="wednesday"></span>
      </div>
    </li>
    <li>
      <div class="list-desc">
        <div>Agenda 3</div>
        <span data-day="thursday"></span>
      </div>
    </li>
  </ul>
</div>

CSS

.list ul > li {
  list-style: none;
}

.list li:nth-child(2),
.list li:nth-child(3) {
  display: none;
}

JavaScript

if (new Date() > new Date("March 23, 2016 00:00:00") && new Date() < new Date("march 23, 2016 23:59:59")) {
  $('[data-day="wednesday"]').parents('li').addClass('show');
  $('[data-day="tuesday"]').parents('li').addClass('hidden');
}
if (new Date() > new Date("March 24, 2016 00:00:00") && new Date() < new Date("march 24, 2016 23:59:59")) {
  $('[data-day="thursday"]').parents('li').addClass('show');
  $('[data-day="tuesday"]').parents('li').addClass('hidden');
}