JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="grid" class="k-content clearfix"></div>
<script id="templ" type="text/x-kendo-template">
<div data-container-for="expires_at" class="k-edit-field">
<input type="date" name="expires_at" data-bind="value:expires_at" data-role="datepicker"/>
</div>
</script>
JavaScript
$('#grid').kendoGrid({
dataSource: {
data: [
{
name: 'test 1',
expires_at: "2010-11-01T00:00:00Z"},
{
name: 'test 2',
expires_at: "2012-04-25T00:00:00Z"}
],
pageSize: 10
},
columns: [
{
field: "name",
title: "Name",
template: '<strong>#=name#</strong>'},
{
field: "expires_at",
title: "Date",
template: '#= kendo.toString(new Date(expires_at), "MM/dd/yyyy") #',
width: "100px"},
{
command: ["edit"],
title: " ",
width: "210px"}
],
editable: {
mode: "popup",
template: kendo.template($('#templ').html(), {
useWithBlock: false
}),
update: true,
destroy: false
}
});