-1

I have a form and when I choose the starttime, I want to set the endtime by one hour later.

I tried to solve it this way:

$('#timepicker2').val($('#timepicker1').val());

But nothing happened:

enter image description here

Time format is "HH:mm"

<div class="form-group">
    <label for="exampleInputEmail1"> <?php echo lang('date'); ?></label>

    <input type="text" class="form-control default-date-picker" readonly="" name="date"
           id="exampleInputEmail1" value='' placeholder="">

</div>
<div class="form-group col-md-12">
    <label for="timepicker1"> <?php echo lang('start_time'); ?></label>
    <div class="col-md-4">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small" name="s_time">
            <span class="btn btn-default input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
</div>

<div class="form-group col-md-12">
    <label for="timepicker2"> <?php echo lang('end_time'); ?></label>
    <div class="col-md-4">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker2" type="text" class="form-control input-small" name="e_time">
            <span class="btn btn-default input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Yura
  • 3
  • 1

2 Answers2

0

try below code,

var firstDate = $("#timepicker1").val();
var hour = oldDate.getHours();
var newDate = firstDate.setHours(hour + 1);
$("#timepicker2").val(newDate);

Hope this will help.

Reporter
  • 3,897
  • 5
  • 33
  • 47
Prajapati Vikas
  • 294
  • 1
  • 10
  • i have already tried code like your, but i have run into 2 problems: 1) getHours is not a function 2) breaks the timepicker – Yura Sep 14 '17 at 12:13
0

Here's an Plunker example from what it looks like you're trying to do.

var time1 = document.querySelector('#time1'),
    time2 = document.querySelector('#time2');

time1.addEventListener('change', function(e){
  time2.value = parseInt(time1.value) + 1;
});

Update Based on new Question

var time1 = document.querySelector('#time1'),
    time2 = document.querySelector('#time2');

time1.value = '10:00';

time1.addEventListener('change', function(e){
  var t1 = time1.value.split(':').map(Number);

  if(t1[1] < 10) t1[1] = '0' + t1[1];

  t1[0] = (t1[0] + 1)%13;

  if(t1[0] === 0) t1[0] = 1;

  time2.value = t1.join(':');
});

That's just a quick hacky solution, it's just to give you an idea of what you can do. There's obviously no validation.

You should probably use a date object new Date() it will accept a date string as the first parameter and parse it into a date. To add an hour to your date

var d = new Date();
d.setHours( d.getHours() + 1);
Jerinaw
  • 5,260
  • 7
  • 41
  • 54
  • yes this is exactly what I need. but i still have a problem. when I check the value $('#timepicker1').val() in the console, i get something like this "11:20". and nothing could adding to this value – Yura Sep 14 '17 at 12:16
  • actually this is almost working. but after parsing string value like "16:20" it's deleting second part( – Yura Sep 14 '17 at 12:46
  • If you want time in hh:mm you need to use a Date object to parse the time. i can update the example. – Jerinaw Sep 14 '17 at 12:52
  • I don't quite understand how to get a Date object here and then parse them into hh:mm format( – Yura Sep 14 '17 at 13:13