JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<div id="grid"></div>

JavaScript

var entries = [
    { "type":"ACH", "begintime":"07:00 AM", "endtime": "07:00 AM"},
    { "type":"Check", "begintime":"07:00 AM", "endtime": "07:00 AM"},
    { "type":"Wire", "begintime":"07:00 AM", "endtime": "07:00 AM"},
    { "type":"Bank Transfer", "begintime":"07:00 AM", "endtime": "07:00 AM"}
];

function timeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
    .appendTo(container)
    .kendoTimePicker({});
}

function dateTimeEditor(container, options) {
    console.log("options", options);
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
    .appendTo(container)
    .kendoDateTimePicker({});
}

$("#grid").kendoGrid({
    dataSource:{
        data:entries,
        schema:{
            parse:function (response) {
                $.each(response, function (idx, elem) {
                    if (elem.time && typeof elem.time === "string") {
                        elem.time = kendo.parseDate(elem.time, "HH:mm:ss");
                    }
                    if (elem.datetime && typeof elem.datetime === "string") {
                        elem.datetime = kendo.parseDate(elem.datetime, "HH:mm:ss");
                    }
                });
                return response;
            },
            model : {
                fields : {
                    type : { editable: false } 
                }
            }
        }
    },
    columns:[
        { field:"type", title:"Cash Transation Type" },
        { field:"begintime", title:"Begin Time(CT)", format:"{0:hh:mm tt}", editor: timeEditor },
        { field:"endtime", title:"End Time(CT)", format:"{0:hh:mm tt}", editor: timeEditor },
        { command: [ "edit" ] },
    ],
        editable:"inline",
        navigatable:true
        });