JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<div class="row">
   <div class="col-md-4 text-right">
          <label for="Anfangszeit">Anfangszeit: </label>
       </div>
   <div class="col-md-8">
         <input data-bind="value: startTime, attr: { min: minStartTime, max: maxStartTime }" type="Time"></input>
          <output data-bind="text: startTime"></output>
   </div>
</div>
<br />
<div class="row">
      <div class="col-md-4 text-right">
           <label for="endTime">Endzeit: </label>
      </div>
        <div class="col-md-8">
        <input data-bind="value: endTime, attr: { min: minEndTime, max: maxEndTime }" type="Time"></input>
            <output data-bind="text: endTime"></output>
  </div>
</div>

JavaScript

var viewmodel ={
startTime: ko.observable(moment().utc().format('HH:mm')),
endTime: ko.observable(moment().add({ hours: 1, minutes: 00 }).utc().format('HH:mm')),

//time min,max values
minStartTime: ko.observable("00:00"),
maxStartTime: ko.observable("23:59"),
minEndTime: ko.observable("00:00"),
maxEndTime: ko.observable("23:59")
}
ko.applyBindings(viewmodel);

viewmodel.startTime.subscribe(function (value) {
       // somehow all what i am writing  here using momentjs doesn't work
    viewmodel.endTime(moment().add({ hours: 1, minutes: 00 }).utc().format('HH:mm'));
//viewmodel.endTime(moment(viewmodel.startTime()).add(1, 'hours').utc().format("HH:mm"));
        //viewmodel.endTime(moment(viewmodel.startTime()).add({ hours: 1, minutes: 0 }).utc().format("HH:mm"));
        //viewmodel.maxEndTime(moment(viewmodel.startTime()).add({ hours: 1, minutes: 0 }).utc().format("HH:mm"));
});