JSFiddle - React, Tailwind, and code Playground

by korchev

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(),

    decrementDateRange: function() {
        var date = viewModel.get("currentDate");
        //date = date.addMonths(-1);
        date = new Date(date.getFullYear(), date.getMonth() - 1, date.getDate());
        console.log(date);
        viewModel.set("currentDate", date);
    },

    incrementDateRange: function() {
        var date = viewModel.get("currentDate");
        date = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());
        console.log(date);
        viewModel.set("currentDate", date);
    },

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

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