Filter by DATE and CATEGORY

by csornmo

HTML

<div class="filter-menu">
  <b>Filter by Date:</b><br>
  <div class="dates">
    <div class="dates-box">
      From: <input type="date" id="fromDate">
    </div>
    <div class="dates-box">
      To: <input type="date" id="toDate">
    </div>
  </div>

  <b>Filter by Category:</b><br>
  <div class="category">
    <div class="checkbox">
      <label for="car">Car</label>
      <input type="checkbox" name="car" id="car" value="car" data-cat="car">
    </div>

    <div class="checkbox">
      <label for="mc">Mc</label>
      <input type="checkbox" name="mc" id="mc" value="mc" data-cat="mc">
    </div>

    <div class="checkbox">
      <label for="bike">Bike</label>
      <input type="checkbox" name="bike" id="bike" value="bike" data-cat="bike">
    </div>
  </div>
</div>

<div class="filter-result">
  <b>Result:</b><br><br>

  <div class="result-boxes">
    <div class="result-box" data-cat="car" data-date="2019-10-07">
      <div class="date">2019-10-07</div>
      <div class="cat">Car</div>
      <div class="name">Ferrari</div>
    </div>

    <div class="result-box" data-cat="bike" data-date="2019-10-14">
      <div class="date">2019-10-14</div>
      <div class="cat">Bike</div>
      <div class="name">Scott</div>
    </div>
    
    <div class="result-box" data-cat="car" data-date="2019-10-24">
      <div class="date">2019-10-24</div>
      <div class="cat">Car</div>
      <div class="name">Ford</div>
    </div>

    <div class="result-box" data-cat="mc" data-date="2019-11-02">
      <div class="date">2019-11-02</div>
      <div class="cat">Mc</div>
      <div class="name">Yamaha</div>
    </div>

  </div>

</div>

CSS

body {
  margin: 0;
}
.filter-menu {
  background: #eee;
  padding: 10px;
}

.dates {
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 10px;
}
.dates-box {
  margin: 10px;
}
.category {
  display: flex;
  align-items: center;
}

.checkbox {
  display: flex;
  border: 1px solid #aaa;
  margin: 10px;
  background: #fff;
  position: relative;
}
.checkbox label {
  padding: 10px 30px 10px 10px;
}
.checkbox input {
  position: absolute;
  right: 5px;
  top: 9px;
}


/* RESULT */
.filter-result {
  padding: 20px 10px;
}

.result-boxes {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 300px;
}

.result-box {
  display: inline-flex;
  width: 100%;
  border: 1px solid #aaa;
  margin-bottom: 10px;
  
  opacity: 0.3;
}
.result-box .date {
  border-right: 1px solid #aaa;
  padding: 5px 10px;
  width: 80px;
}
.result-box .cat {
  border-right: 1px solid #aaa;
  padding: 5px 10px;
  background: #eee;
  width: 50px;
}
.result-box .name {
  padding: 5px 10px;
}


.showDate.showCat,
.showAll.showDate {
  opacity: 1;
}

JavaScript

// Get todays date
var d =  new Date();
var month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = '' + d.getFullYear();

if (day < 10) { day = '0' + day;} 
if (month < 10) { month = '0' + month;}
/********************************************/


// Set Default Date values 
var date = year + '-' + month + '-' + day;
$('#fromDate').val(date);
$('#toDate').val(year + '-12-31');


// FILTER BY DATE AND CATEGORY - Default
var fromDate = $('#fromDate').val().replace(/-/g,'');
var toDate = $('#toDate').val().replace(/-/g,'');

$('.result-box').each(function() {
  var resultBox_Date = $(this).attr('data-date').replace(/-/g,'');
  // FILTER BY DATE 
  if ( fromDate <= resultBox_Date && toDate >= resultBox_Date ) {
    $(this).addClass('showAll showDate');
  } else {
    $(this).removeClass('showAll showDate');
  }
});


// FILTER BY DATE AND CATEGORY - Changes
$('input').change(function() {
  var thisInput = $(this);

  var fromDate_val = $('#fromDate').val();
  var fromDate = $('#fromDate').val().replace(/-/g,'');
  var toDate = $('#toDate').val().replace(/-/g,'');

  $('.result-box').each(function() {
    var resultBox_Date = $(this).attr('data-date').replace(/-/g,'');

		
    // FILTER BY CATEGORY 
    $(thisInput).each(function(){
      var cat = $(thisInput).filter(':checked').val();
      console.log(cat);
      var unCat = $(thisInput).filter(':not(:checked)', false).val();
      console.log(unCat);
      if ( fromDate <= resultBox_Date && toDate >= resultBox_Date ) {
        $('.result-box[data-cat*="'+cat+'"]').addClass('showCat');
        $('.result-box[data-cat*="'+unCat+'"]').removeClass('showCat');
      }
    });

    // FILTER BY DATE
    if ( fromDate <= resultBox_Date && toDate >= resultBox_Date ) {
      $(this).addClass('showDate');
    } else {
      $(this).removeClass('showDate');
    }


		// IF ANY CATEGORY IS CHECKED
  	if ( $('input:checked').length === 0 ) {
      $('.showDate').addClass('showAll');
    } else {
     ...