JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.core.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.web.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<p>I had remote desktop into a user’s computer because they were having problems scheduling a meeting what I had noticed was how they were interacting with the date time picker. It results in a null value.</p>
<p>Change either one of the date time pickers to have the following aM or pM.</p>
<p>By adding parseFormats: MM/dd/yyyy hh:mm t solved the issue</p>
<div id="dateExample">
    <fieldset>
        <legend>Day One</legend>Starts:&nbsp;<input id="dayOneStart" data-bind="kendoDateTimePicker: {valueUpdate: 'change', value: sDateOne, widget: sDateOneWidget, parseFormats: 'MM/dd/yyyy hh:mm t'}" />&nbsp;&nbsp;&nbsp;Ends:&nbsp;<input id="dayOneEnd" data-bind="kendoDateTimePicker: {valueUpdate: 'change', value: eDateOne, widget: eDateOneWidget, parseFormats: 'MM/dd/yyyy hh:mm t'}" />
    </fieldset>
</div>

JavaScript

var vm;
vm = {
    sDateOne: ko.observable(new Date()),
    sDateOneWidget: ko.observable(),
    eDateOne: ko.observable(new Date()),
    eDateOneWidget: ko.observable()
};
vm.sDateOne.subscribe(function(newValue) {
    alert('Value for Start: ' + vm.sDateOneWidget().value());
});
vm.eDateOne.subscribe(function(newValue) {
    alert('Value for End: ' + vm.eDateOneWidget().value());
});
$(document).ready(function () {
    ko.applyBindings(vm, document.getElementById(dateExample));
});