JSFiddle - React, Tailwind, and code Playground

by stratdaz

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="dd-MMM-yyyy"></span>
<br />
<span data-bind="date: selectedBlock.LastUpdated" data-dateformat="dd"></span>
<br />
<span data-bind="number: fee" data-numberformat="c"></span>
<br />
<span data-bind="number: invoice" data-numberformat="000000"></span>
<br />
<span data-bind="text: invoiceFormatted"></span>
<br />
<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));
        }
    }
});

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

var viewmodel = kendo.observable({
    selectedBlock: {
        LastUpdated: new Date(2011, 1, 1)
    },
    fee: 176.447,
    invoice: 2,
    invoiceFormatted: function () {
        return kendo.toString(6, "000000");
    },
    changeSelectedBlock: function() {
        this.set("selectedBlock", {
            LastUpdated: new Date(2012, 1, 2)
        });
    }
});

kendo.bind(document.body, viewmodel);