JSFiddle - React, Tailwind, and code Playground

by RedF

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
Last Updated:<span data-bind="date: selectedBlock.LastUpdated" data-dateformat="dddd MMM dd, yyyy hh:mmtt"></span>

<button data-bind="click: changeSelectedBlock">change</button>

CSS

.selected{
  background: red;
  color: white;    
}

JavaScript

kendo.data.binders.date = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
 
        this.dateformat = $(element).data("dateformat");
    },
    refresh: function () {
        var data = this.bindings["date"].get();
        if (data) {
            var dateObj = new Date(data);
            $(this.element).text(kendo.toString(dateObj, this.dateformat));
        }
    }
});

var viewmodel = kendo.observable({
    selectedBlock: {
        LastUpdated: new Date(2011, 1, 1)
    },
    changeSelectedBlock: function() {
        this.set("selectedBlock", {
            LastUpdated: new Date(2012, 1, 2)
        });
    }
});

kendo.bind(document.body, viewmodel);