Kendo Grid filter by date, ignoring time

by Paul Smith

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="grid"></div>

<p>I want to display the "Sale Time" as date and time, but when filtering, filter by date only and ignore time.</p>
<p>As is, filtering Sale Time with "1/5/2015" returns nothing because it checks for time too.</p>
<p>Note: filtering for "before", "after", etc works becuase it checks for the date with 00.00.000 time. But "Is Equal To" won't work.</p>

CSS

#grid {
    margin-top: 30px; /* otherwise the "result" button blocks the filter :) */
}
p {
    margin: 1em;
}

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [{
        "ModelName": "Unknown",
        "DefaultMonoCPP": 7133.0332,
        "SaleTime": "1/1/2015 2:13:13 PM",
    }, {
        "ModelName": "LaserJet 4345",
        "DefaultMonoCPP": 1513.0312,
        "SaleTime": "1/1/2015 3:54:32 PM",
    }, {
        "ModelName": "Nuvera 120",
        "DefaultMonoCPP": 134.0515,
        "SaleTime": "1/3/2015 5:23:43 PM",
    }, {
        "ModelName": "LaserJet 4345",
        "DefaultMonoCPP": 1513.0312,
        "SaleTime": "1/5/2015 5:12:13 PM",
    }, {
        "ModelName": "Nuvera 120",
        "DefaultMonoCPP": 134.0515,
        "SaleTime": "1/5/2015 2:45:54 PM",
    }],
    schema: {
        model: {
            id: "ModelID",
            fields: {
                ModelName: {
                    type: "string"
                },
                DefaultMonoCPP: {
                    type: "number"
                },
                SaleTime: {
                    type: "date",
                    // this doesn't work because it removes the time completely
                    parse: function(e) {
                        return kendo.parseDate(e, "MM/dd/yyyy");
                    }
                }
            }
        }
    }
}); 

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
        {
            field: "ModelName",
            title: "Model"
        }, {
            field: "DefaultMonoCPP",
            title: "Mono Cost"
        }, {
            field: "SaleTime",
            title: "Sale Time",
            format: "{0:g}",
            // maybe something like this?
            //filterable: {
            //    ui: function(e) {
            //        e.kendoDateTimePicker({
            //            // some formatting/parsing options here?
            //        });
            //    }
            //}
        }
    ],
    filterable: {
        extra: false
    }
});