JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-darkness/jquery-ui.css">
<script src="https://raw.github.com/trentrichardson/jQuery-Timepicker-Addon/master/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="https://raw.github.com/trentrichardson/jQuery-Timepicker-Addon/master/jquery-ui-timepicker-addon.css">
<label for="from">From</label>
<input type="text" id="confirmed_time_start" name="from"/>
<label for="to">to</label>
<input type="text" id="confirmed_time_end" name="to"/>

JavaScript

$('#confirmed_time_start').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18,
    onSelect: function(timeStr) {
        var newTime = $(this).timepicker('getDate');
        if (newTime) { // Not null
            newHour.setDate(newTime.getHours());
            newMinute.setDate(newTime.getMinutes());
            $('#confirmed_time_end').timepicker('hourMin', newHour);
            $('#confirmed_time_end').timepicker('MinuteMin', newMinute);
        }   
     }

});

$('#confirmed_time_end').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18 
});