How do I Increment an Hour in the Next Time Field using JavaScript

Question

I have two time fields FromTime and ToTime. I need a JavaScript function to take the time input from the fromTime field and Add an Hour and fill the toTime when the focus changes.

<div class="control-group">
    <label class="control-label" for="TFname">Time From:</label>
    <div class="controls">
        <input type="Time" name="fromTime" id="Ftime" required onfocusout="setTime()">
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="TTname">Time To:</label>
    <div class="controls">
        <input type="Time" name="toTime" id="toTime" required>
    </div>
</div>
<script>
    function setTime() { /* The function here */ }
</script>

Answer 1

You can use split function to separate hours and minutes.

 $('#Ftime').on('input', function(){ var element = document.getElementById("Ftime").value; var t = element.split(":"); var hour = parseInt(t[0])+1; var minute = parseInt(t[1]); if(minute<10){ minute='0'+minute; } if(hour==24) { hour='00'; }else if(hour<10){ hour='0'+hour; } document.getElementById("toTime").value = hour+':'+minute; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="control-group"> <label class="control-label" for="TFname">Time From:</label> <div class="controls"> <input type="Time" name="fromTime" id="Ftime" required > </div> </div> <div class="control-group"> <label class="control-label" for="TTname">Time To:</label> <div class="controls"> <input type="Time" name="toTime" id="toTime" required > </div> </div>