JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css">
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

$(document).ready(function () {
 var data = [
             { "shiftName":"Shift1", "shiftStartTime":"06:00", shiftEndTime: "2015-12-12T14:00" },
             { "shiftName":"Shift2", "shiftStartTime":"14:00", shiftEndTime: "2015-12-12T22:00"}
           ];
            $("#grid").kendoGrid({
                            columns: [
                                     {
                                         field: "shiftName",
                                         title: "Shift Name"
                                     },
                                     {
                                         field: "shiftStartTime",
                                         title: "Shift Start Time",
                                         format:"{0:HH:mm}", editor: timeEditor
                                     },
                                     {
                                         field: "shiftEndTime",
                                         title: "Shift End Time",
                                         type: "date",
                                         format:"{0:yyyy-MM-dd HH:mm}", editor: dateTimeEditor
                                     }
                            ],
                            dataSource: data,
                            edit:function(){
                                $(":input[type='time']").change(function (e) {
                                    this.value = e.currentTarget.value;
                                });
                                $(".k-i-clock").click(function () {
                                    $(this).parent().parent().addClass("k-state-boder-down");
                                    $(this).parent().parent().parent().addClass("k-state-border-down k-state-active");
                                });
                            },
                            editable: true,
                            toolbar: ["create", "save"]
                        });
                        
     ...