DatePicker Filter, JavaScript Programming Example of DatePicker Filter

DatePicker Filter, JavaScript Programming Example of DatePicker Filter

Use the programming example below to set a datepicker filter in Pivot. Feel free to use coding samples by Webix for building custom business web apps.

JS Code

var dateFormat = webix.Date.strToDate("%m/%d/%Y");

webix.ui({
  id:"pivot",
  view:"pivot",
  datatable:{
    autoheight: true
  },
  scheme:{
    $init: function(item){
      // add a new field with "date" timestamp
      // fields that begin with "$" are not shown in the "Fields" list
      item.$date = dateFormat(item.date).valueOf();
    }
  },
  structure: {
    rows: [ "client"],
    filters:[{name: "date", type: "datepicker"}],
    columns: ["date"],
    values: [{ name:"statValue", operation:["min","max"]}]
  },
  // fields for filtering
  filterMap: {
    date: "$date"
  }
});

$$("pivot").parse(data);

HTML Code

<script>
var data = [
  {id: "1", client: "ACME", company: "A", country: "Germany", date: "11/01/2017", statValue:0.5},
  {id: "2", client: "ACME", company: "A", country: "Germany", date: "11/01/2017", statValue:0.4},
  {id: "3", client: "ACME", company: "B", country: "Germany", date: "11/15/2017", statValue:0.3},
  {id: "4", client: "ACME", company: "B", country: "Germany", date: "11/15/2017", statValue:0.5},
  {id: "5", client: "ACME", company: "A", country: "France", date: "12/01/2017", statValue:0.4},
  {id: "6", client: "ACME", company: "A", country: "France", date: "12/01/2017", statValue:0.6},
  {id: "7", client: "ACME", company: "B", country: "France",date: "12/15/2017", statValue:0.1},
  {id: "8", client: "ACME", company: "B", country: "France", date: "12/15/2017", statValue:0.5},
  {id: "9", client: "Samsung", company: "A", country: "Germany", date: "11/01/2017", statValue:0.7},
  {id: "10", client: "Samsung", company: "A", country: "Germany", date: "11/01/2017", statValue:0.4},
  {id: "11", client: "Samsung", company: "B", country: "Germany", date: "11/15/2017", statValue:0.3},
  {id: "12", client: "Samsung", company: "B", country: "Germany", date: "11/15/2017", statValue:0.5},
  {id: "13", client: "Samsung", company: "A", country: "France", date: "12/01/2017", statValue:0.8},
  {id: "14", client: "Samsung", company: "A", country: "France", date: "12/01/2017", statValue:0.4},
  {id: "15", client: "Samsung", company: "B", country: "France", date: "12/15/2017", statValue:0.3},
  {id: "16", client: "Samsung", company: "B", country: "France", date: "12/15/2017", statValue:0.5}
];
</script>