Sift.js

Sift.js is a UI component for filters. You can filter by: (a) multiple choice (b) single choice (c) date and (d) date range.

The library can be found on GitHub as can the documentation.

And some examples can be seen below.

Big thanks to CommuSoft where I built version 0.1.0

Example #1

Result
HTML

<div id="example-one"></div>

Data

var cars = [
  {
    "value": "asto",
    "displayName": "Aston Martin"
  },{
    "value": "lamb",
    "displayName": "Lamborghini"
  },{
    "value": "pors",
    "displayName": "Porsche"
  },{
    "value": "mcla",
    "displayName": "McLaren"
  },{
    "value": "ferr",
    "displayName": "Ferrari"
  },{
    "value": "bron",
    "displayName": "Bugatti Veyron"
  },{
    "value": "koen",
    "displayName": "Koenigsegg"
  }
];

JS

exampleOne = new Sift("#example-one", {
  displayName: "Car manufacturers",
  type: "checkbox",
  filters: cars,
  activeFilter: ["asto", "pors"],
  onFilterApplied: function(activeFilter) {
    console.log("Car manufacturers: " + activeFilter);
  }
});

Example #2

Result
HTML

<div id="example-two"></div>

Data

var cars = [...]; // Same as Example #1

JS

exampleTwo = new Sift("#example-two", {
  displayName: "Car manufacturer",
  type: "radio",
  filters: cars,
  activeFilter: "asto",
  onFilterApplied: function(activeFilter) {
    console.log("Car manufacturer: " + activeFilter);
  }
});

Example #3

Result
HTML

<div id="example-three"></div>

JS

exampleThree = new Sift("#example-three", {
  type: "calendar",
  displayName: "Made on",
  calendarOptions: {
    minDate: new Date(2015, 7, 20),
    maxDate: new Date(2017, 7, 20),
    existingDate: new Date(2016, 7, 20),
    dragSelection: false
  },
  onFilterApplied: function(singleDate) {
    console.log("Made on: " + singleDate);
  }
});

Example #4

Result
HTML

<!-- This calendar allows you to select a single date
or date range (within the same month) -->

<div id="example-four"></div>

JS

exampleFour = new Sift("#example-four", {
  type: "calendar",
  displayName: "Made",
  calendarOptions: {
    existingDateRange: [new Date(2015, 0, 1), new Date(2015, 0, 10)]
  },
  onFilterApplied: function(startDate, endDate) {
    if(endDate) {
      console.log("Made between: " + startDate + " – " + endDate);
    }else {
      console.log("Made on: " + startDate);
    }
  }
});

Example #5

Result
HTML

<div id="example-five"></div>

JS

exampleFive = new Sift("#example-five", {
  type: "multi_calendar",
  displayName: "Made between",
  calendarOptions: {
    existingDateRange: [new Date(2015, 0, 1), new Date(2015, 11, 25)]
  },
  onFilterApplied: function(startDate, endDate) {
    console.log("Made between: " + startDate + " – " + endDate);
  }
});

P.S. Internally Sift.js uses 2 other open source libraries I've built. Both can be used as stand-alone components – and found on GitHub: