<div class="container">

  <div class="controls row">
    <div class="col col-sm-8">
      <form id="Filters">

      

        <div class="input-daterange input-group" id="datepicker">
          <input type="text" class="input-sm form-control startDate" name="start" />
          <span class="input-group-addon">to</span>
          <input type="text" class="input-sm form-control endDate" name="end" />
        </div>
        <button id="searchDateRange">&#10144;</button> 
      </form>
    </div>


  </div>


  <div id="mixContainer" class="mixItems">
    <div class="mix gridView category-1" data-myorder="2016" data-date="20160115">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-3" data-myorder="2013" data-date="20130115">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-1" data-myorder="2013" data-date="20130230">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-2" data-myorder="2015" data-date="20150430">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-1" data-myorder="2014" data-date="20140115">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-1" data-myorder="2016" data-date="20160115">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-3" data-myorder="2014" data-date="20140330">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-2" data-myorder="2012" data-date="20120315">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-1" data-myorder="2014" data-date="20140430">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-1" data-myorder="2015" data-date="20150315">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-3" data-myorder="2015" data-date="20150830">
      <p class="newsHead">Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="mix gridView category-4" data-myorder="2011" data-date="20110830">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum copy </p>
    </div>
    <div class="gap"></div>
    <div class="gap"></div>
    <div class="gap"></div>
  </div>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.controls {
  padding: 1em;
}

label {
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button {
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button.active {
  background: #68b8c4;
}

button:focus {
  outline: 0 none;
}

button + label {
  margin-left: 1em;
}

.mixItems {
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.mixItems:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.mixItems .mix,
.mixItems .gap {
  display: inline-block;
  width: 49%;
  overflow: hidden;
}

.mixItems .mix {
  text-align: left;
  background-color: #f7f7f7;
  margin-bottom: 2%;
  display: none;
}

.mixItems .mix.gridView img {
  width: 100%;
  display: block;
}

.mixItems .mix.listView img {
  display: none;
}

.mixItems .mix .abstract {
  color: #000;
  font-size: 12px;
  padding: 0 1.5em 1.5em 1.5em;
}

.mixItems .mix .newsHead {
  color: #666;
  font-size: 12px;
  padding: 1.5em 1.5em 0 1.5em;
  font-size: 14px;
  font-weight: bold;
}

@media all and (min-width: 420px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 32%;
  }
}

@media all and (min-width: 640px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 23.5%;
  }
}


/**
 * List Styles
 */

.mixItems.list .mix {
  width: 100%;
}

.mixItems.list .mix:before {
  padding-top: 40px;
}

.controls #ChangeToList span .controls #ChangeToGrid span {
  vertical-align: middle;
}

.controls #ChangeToList span.active,
.controls #ChangeToGrid span.active {
  opacity: 1;
}

.controls #ChangeToList span.inactive,
.controls #ChangeToGrid span.inactive {
  opacity: 0.5;
}

.controls #ChangeToList:hover span.inactive,
.controls #ChangeToGrid:hover span.inactive {
  opacity: 0.75;
}

$(function() {

  $('.input-daterange').datepicker({
    endDate: "today",
    todayBtn: "linked",
    multidate: false,
    autoclose: true,
    format: "mm/yyyy", /// DISPLAYS only Months & Years
    startView: "year", /// DISPLAYS only Months & Years
    minViewMode: "months" /// DISPLAYS only Months & Years
  });
  $('#searchDateRange').on('click', function(e) {
    e.preventDefault();
    var startDay = $('#datepicker').find(".startDate").val().replace(/\//g, '').replace(/(\d\d)(\d\d\d\d)/g, '$2$1');
    var endDay = $('#datepicker').find(".endDate").val().replace(/\//g, '').replace(/(\d\d)(\d\d\d\d)/g, '$2$1');
    var $targets = $('#mixContainer').find('.mix');
    var $show = $targets.filter(function() {
      var date = $(this).attr('data-date');
      return (date >= startDay) && (date <= endDay);
    });
    $('#mixContainer').mixItUp('filter', $show); 
  }); 
     
    var oneYearPrior = new Date(); 
    oneYearPrior.setDate(oneYearPrior.getDate() - 365);
    $(".startDate").datepicker("setDate", oneYearPrior);
    $(".startDate").datepicker('update');
    $(".endDate").datepicker("setDate",  Date());
    $(".endDate").datepicker('update');

  $('#mixContainer').mixItUp({
    animation: {
      duration: 250,
      effects: 'fade translateZ(-360px) stagger(34ms)',
      easing: 'ease'
    },
    layout: {
      containerClass: 'grid'
    },
    controls: {
      enable: true
    },
    callbacks: {
      onMixFail: function() {
        alert('No items were found matching the selected filters.');
      }
    }
  });
});