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>
<script src="http://cdn.kendostatic.com/2012.1.515/js/cultures/kendo.culture.nl-NL.min.js"></script>
Geboortedatum: <span data-bind="date: Geboortedatum" data-dateformat="d MMMM yyyy"></span>

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

CSS

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

JavaScript

kendo.culture("nl-NL");

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({
    Geboortedatum: new Date(1953, 9, 14),
    change: function() {
        if (this.get("Geboortedatum").getTime() == new Date(1953, 9, 14).getTime()) {
            this.set("Geboortedatum", new Date(1949, 4, 9));
        }
        else {
            this.set("Geboortedatum", new Date(1953, 9, 14));
        }
    }
});

kendo.bind(document.body, viewmodel);