Kendo UI - Grid / Filter menu customization between 2 dates

Question

I'm working with some Kendo UI grids, and have been using the filtering options available, and they work great. Does anyone know if there is a way to do a date range filter for a column? The closest thing I could get was >= and <= type of filter. But I really need to be able to filter between 2 dates.

Does anyone know if there is a way to accomplish this?

Thanks

Answer 1

I am sharing you link regarding date range filter for a column..

http://dojo.telerik.com/@pesho/UMIw/3

i hope you like it.. then don't forget to give vote..

Answer 2

You basically need to define a filter for your DataSource and then invoke filter method.

This is done as follows:

// Get from date in this case we read it from an input DatePicker
var from = $("#from").data("kendoDatePicker").value()
// Get to date in this case we read it from an input DatePicker
var to = $("#to").data("kendoDatePicker").value()
// Create a filters condition. By default, the conditions are "and" but they might also
// be "or"
var filters = [
    {field: "BirthDate", operator: "gte", value: from},
    {field: "BirthDate", operator: "lte", value: to}
];
// Set the filtering condition to our grid dataSource
grid.dataSource.filter(filter);

You can see it running here: http://jsfiddle.net/OnaBai/f19k0vrt/3/

You can also do it defining the input fields for dates in the Grid toolbar if you want to display them permanently.

Defining the template:

<script id="dates-template" type="text/kendo-tmpl">
    From: <input id="from" style="width: 120px"/> 
    To: <input id="to" style="width: 120px"/>
    <button id="filter" class="k-button">Filter</button>
</script>

And adding to your grid initialization the toolbar template defined above:

var grid = $("#grid").kendoGrid({
    toolbar   : [
        { template: kendo.template($("#dates-template").html()) }
    ],
    dataSource: ds,

You can see it running here: http://jsfiddle.net/OnaBai/f19k0vrt/4/