JSFiddle - React, Tailwind, and code Playground

Filter Working on Time Column Menu (seconds version)

by Alex Yu

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<div style="width: 100%; height: 400px">
    <table id="grid" style="width: 100%; heigth: 100%"></table>
</div>

JavaScript

var localData = [];

var randDate;
for (var i = 0, max_i = 7; i < max_i; i += 1) {
    var r = Math.random();
    //initializing with this not work     
    //randDate = new Date();
    //initializing with specified arguments will work
    randDate = new Date(0, 0, 0);

    randDate.setHours(r * 24, r * 60, r * i * 60 / max_i);
    //console.log(randDate);

    localData.push({
        Id: i,
        RandDate: randDate
    });
}

var dataSource = new kendo.data.DataSource({
    data: localData,
    schema: {
        model: {
            fields: {
                Id: {
                    type: "number"
                },
                RandDate: {
                    type: "date"
                }
            }
        },
        parse: function (d) {
            $.each(d, function (idx, elem) {
                elem.Date = kendo.parseDate(elem.Date, "HH:mm:ss");
            });
            return d;
        }
    }
});

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columnMenu: true,

    scrollable: true,
    height: 500,
    sortable: false,
    filterable: true,
    groupable: true,
    columns: [{
        field: "Id",
        title: "Row Id",
        filterable: false
    }, {
        field: "RandDate",
        title: "Random Date",
        format: "{0:HH:mm:ss}",
        filterable: {
            ui: function (element) {
                element.kendoTimePicker({
                    format: "HH:mm:ss",
                }); // initialize a Kendo UI TimePicker
            }
        }
    }]
}).data("kendoGrid");