Auto populate finish time textbox 15 mins from start time

Question

I have 2 textbox, Start_time and Finish_time, when i pick time lets say 12:00:00 using jquery time picker, the Finish time should show 12:15:00 automatically.any help? much appreciated. I tried so many javascript code but it doesn't work. im using 24 hr format.

<html>
            
           <div>
           <input  type="text" name="start_time" id="start_time"> 
           <div>
           
            <div>
         <input  type="text" name="finish_time" id="finish_time" readonly>
         </div>
      </html>

Can you show your progress? A part of the code perhaps. It helps us know the problem more — StepPen-codes, Apr 30 '21 at 14:08
i had a code here but before proceeding to finish time, i need to manually pick 15 mins to meeting length. — yong, Apr 30 '21 at 14:17
Please read https://idownvotedbecau.se/nocode https://idownvotedbecau.se/itsnotworking — FZs, Apr 30 '21 at 14:20

score 0 · Answer 1 · answered Apr 30 '21 at 15:11

This plugin stores chosen time in the list, precisely, in element with id: #ui-active-item . When you know this, just some time manipulation is left.

$(document).ready(function() {
    $('#start_time').timepicker({
        timeFormat: 'HH:mm ss',
        interval: 1,
        minTime: '10',
        maxTime: '6:00pm',
        defaultTime: '11',
        startTime: '10:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
    $('#start_time').blur(function() {
        console.log($('#ui-active-item').text());
        time = new Date($('#ui-active-item').text());
        final = new Date(time.getTime() + 15 * 60000);
        timer = final.toLocaleTimeString('it-IT')
        $('#finish_time').val(timer)
    })
});

DEMO:

$(document).ready(function() {
    $('#start_time').timepicker({
        timeFormat: 'HH:mm ss',
        interval: 1,
        minTime: '10',
        maxTime: '6:00pm',
        defaultTime: '11',
        startTime: '10:00',
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
    $('#start_time').blur(function() {
        console.log($('#ui-active-item').text());
        time = new Date($('#ui-active-item').text());
        final = new Date(time.getTime() + 15 * 60000);
        timer = final.toLocaleTimeString('it-IT')
        $('#finish_time').val(timer)
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<input  type="text" name="start_time" id="start_time"> 
<input  type="text" name="finish_time" id="finish_time" readonly>

Great help was: How to add 30 minutes to a JavaScript Date object?

thankyou so much for your help i really need this :) it shows invalid date on me but i think it's just because of the time format. thankyou so much — yong, Apr 30 '21 at 16:44
Hmmm.... not sure, but you can convert other date to HH: mm ss? — sinisake, Apr 30 '21 at 17:01
Hm... not sure, plugin code should be checked, and changed, eventually... — sinisake, Apr 30 '21 at 18:43
hmm okay, I'll try to fix it. thankyou so much for your help :) — yong, May 01 '21 at 00:32

Auto populate finish time textbox 15 mins from start time

1 Answers1