New to Kendo UI for jQuery? Start a free 30-day trial

Operators.date.custom

configuration

Specifies a custom operator.

operators.date.custom

Object

<div id="filter"></div>
<script>
  var data = [
      { name: "Jane Doe", birthDate: new Date(1990, 0, 15) },
      { name: "John Doe", birthDate: new Date(1985, 5, 20) }
    ];

  var dataSource = new kendo.data.DataSource({
    data: data
  });

  $("#filter").kendoFilter({
    dataSource: dataSource,
    operators: {
        date: {
            custom: {
                text: "Custom Date Filter",
                handler: function(data) {
                    console.log("Custom date filter applied", data);
                    return true;
                }
            }
        }
    },
    fields: [
      { name: "birthDate", type: "date", label: "Birth Date" }
    ]
  });
</script>

operators.date.custom.handler

Function

The handler of the operator.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", hireDate: new Date(2017,5,2) },
      { name: "John Doe", hireDate: new Date(2019,6,9) }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    fields: [
      { name: "hireDate", type:"date", label: "Hire Date", operators: {
          date:{
            customOperator:{
              text: 'Custom operator',
              handler: customOperatorHandler
            }
          }
        } },
      { name: "name", type:"string", label: "Name" }
    ]
  });

  function customOperatorHandler(itemValue, filterValue){
    return itemValue.getMonth() > filterValue.getMonth();
  }
</script>

operators.date.custom.text

String

The text displated in the operators drop down.

<div id="filter"></div>
<br /><br />
<script>
  var data = [
      { name: "Jane Doe", hireDate: new Date(2017,5,2) },
      { name: "John Doe", hireDate: new Date(2019,6,9) }
    ];

  var dataSource = new kendo.data.DataSource({
  	data: data
  });

  $("#filter").kendoFilter({
  	dataSource: dataSource,
    expressionPreview: true,
    fields: [
      { name: "hireDate", type:"date", label: "Hire Date", operators: {
          date:{
            customOperator:{
              text: 'Custom operator',
              handler: customOperatorHandler
            }
          }
        } },
      { name: "name", type:"string", label: "Name" }
    ]
  });

  function customOperatorHandler(itemValue, filterValue){
    return itemValue.getMonth() > filterValue.getMonth();
  }
</script>