JSFiddle - React, Tailwind, and code Playground

by BrianVallelunga

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.web.min.js"></script>
<script src="https://raw.github.com/andrewplummer/Sugar/master/release/1.2.5/minified/sugar-1.2.5.min.js"></script>
<div id="DateNavigation">
    <button id="NextDateRange" data-bind="click: decrementDateRange">&laquo;</button>
    <span data-bind="text: displayCurrentDate"></span>
    <button id="PreviousDateRange" data-bind="click: incrementDateRange">&raquo;</button>
</div>

JavaScript

var viewModel = kendo.observable({
    
    currentDate: new Date(),
    dummyDateText: null,
    
    decrementDateRange: function() {
        var date = viewModel.get("currentDate");
        date = date.addMonths(-1);
        console.log(date);
        viewModel.set("currentDate", date);
        viewModel.set("dummyDateText", date.iso());
    },

    incrementDateRange: function() {
        var date = viewModel.get("currentDate");
        date = date.addMonths(1);
        console.log(date);
        viewModel.set("currentDate", date);
        viewModel.set("dummyDateText", date.iso());
    },

    displayCurrentDate: function() {
        var date = viewModel.get("currentDate");
        var dummyDateText = this.get("dummyDateText");
        return date.format("{month}");
    }

});


$(function() {
    kendo.bind($("#DateNavigation"), viewModel);
});