JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<div class='liveExample'>    
    <p>Computed Date: <span data-bind='text: calculation' /></p>
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

// Here's my data model
var ViewModel = function(date, noOfMonths) {
    this.calculation = ko.computed(function(){
    var m = moment(date);
    return m.add('months',noOfMonths).format('YYYY-MM-DD');
    },this);
};
 
ko.applyBindings(new ViewModel(new Date('7/31/2014 17:15:00'), 4)); // This makes Knockout get to work