JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<label id="eventAllowableStartLimitLabel"> Allowable Start Limit: </label>
 <label id="eventAllowableStartLimitLabelValue">  </label> 
 <br />
 <br />
 <label id="eventAllowableEndLimitLabel"> Allowable End Limit: </label>
 <label id="eventAllowableEndLimitLabelValue">  </label> 
 <br />
 <br />
 <br />
<label id="eventStartedAtLabel"> Event Started At: </label>
 <label id="eventStartedAtLabelValue">  </label> 
 <br />
 <br />
<table id = "eventStartTable">
<tr>  
    <td class="style1" >  
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td> 
   <td >  
      <button id="addMonthsButtonStart" >+</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td>   
    <td >  
       <button id="addDaysButtonStart" >+</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td> 
    <td >  
      <button id="addHoursButtonStart" >+</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td> 
    <td >  
      <button id="addMinsButtonStart" >+</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </td> 
</tr>
<tr>
   <td class="style1" >  
     
   </td>
   <td>
   <input id="MonthsStart" type="text" data-bind="value: MonthsEventStart"/> 
   <label> Month </label>
   </td>
    <td>
   <input id="DaysStart" type="text" data-bind="value: DaysEventStart"/>
   <label> Day </label>
   </td>
    <td>
   <input id="HoursStart" type="text" data-bind="value: HoursEventStart"/>
   <label> h </label>
   </td>
    <td>
   <input id="MinsStart"...

CSS

button
        {
            width: 50px;
            height: 30px;			
			font-size:25px;
			font-weight: bold;
        }       
        #lastButton, #nowButton
        {
            height: 18px;
            width: 77px;
			font-size:12px;
			font-weight: normal;
        }
        .style1
        {
            width: 103px;
        }
        Input
        {
            width: 65px;
            height: 25px;                      
        }

JavaScript

var event_start_time_intial = new Date("12/31/2014 13:58:00");	
                    var event_end_time_intial = new Date("12/31/2014 22:01:00");	
					var allowed_start_time_local = new Date("12/31/2014 14:00:00");	// can not be less than this time
                    var allowed_end_time_local = new Date("12/31/2014 22:00:00"); // can not be greater than this time 
                    $("#eventAllowableStartLimitLabelValue").text(allowed_start_time_local.toLocaleString()).css({ 'font-size': 20, 'font-weight': 'bold'});;
                    $("#eventAllowableEndLimitLabelValue").text(allowed_end_time_local.toLocaleString()).css({ 'font-size': 20, 'font-weight': 'bold'});;					
					var viewModelEventStartTime = new kendo.data.ObservableObject({
					       YearsEventStart: 2014,
						   MonthsEventStart: 8,
						   DaysEventStart: 9,
						   HoursEventStart: 13,
						   MinsEventStart: 59					                                                                         				  
					    });
						var viewModelEventEndTime = new kendo.data.ObservableObject({					       
						   YearsEventStopped: 2014,
						   MonthsEventStopped: 8,
						   DaysEventStopped: 9,
						   HoursEventStopped: 22,
						   MinsEventStopped: 0					                                         						                                                				  
					    });
						var viewModelDuration = new kendo.data.ObservableObject({					       
						   MonthsEventDuration: 0,
						   DaysEventDuration: 0,
						   HoursEventDuration: 8,
						   MinsEventDuration: 0						                                             				  
					    });
						var viewModelEventStartTimeDateTime = new kendo.data.ObservableObject({					       
						   EventStartTime: event_start_time_intial						  
						});  
						var viewModelEventEndTimeDateTime = new kendo.data.ObservableObject({					       
						   EventEndTime: event_end_time_intial						  
						});													
viewModelDuration.bind("change",...