I have a defaultTime setup that takes the device clock and set it as default for the first timepicker, and for the second it just sets +1 hour from the first one. That is how it works when I load it.
But what I want to achieve is pretty similar to google docs calendar. If I change the first timepicker, it should also change the second. If I change the second, that should only create a timedifference between timepicker nr 1 and nr 2. That means if nr 1 is showing 10.00 and nr 2 is showing 11, if I change nr 2 to 12 and then start changing nr 1, it should keep the difference as 2 hours unless I change nr 2 back.
Here is my code for the HTML and PHP
<div class="col-md-6 timeField" <?= !$calendarEntryForm->showTimeFields() ? 'style="opacity:0.2"' : '' ?>>
<?= $form->field($calendarEntryForm, 'start_time')->widget(TimePicker::class,
[
'readonly' => false,
'pluginOptions' => [
'minuteStep' => 5,
'defaultTime' => date('H:00', strtotime('+1 hour')),
],
'options'=>[
'class'=>'form-control',
]
],
['disabled' => $calendarEntryForm->entry->all_day]); ?>
</div>
</div>
<div class="col-md-6 timeField" <?= !$calendarEntryForm->showTimeFields() ? 'style="opacity:0.2"' : '' ?>>
<?= $form->field($calendarEntryForm, 'end_time')->widget(TimePicker::class,
[
'readonly' => false,
'pluginOptions' => [
'minuteStep' => 5,
'defaultTime' => date('H:00', strtotime('+2 hour')),
],
'options'=>[
'class'=>'form-control',
]
],
['disabled' => $calendarEntryForm->entry->all_day]); ?>
</div>
</div>
The timepicker which is used is Kartik Visweswaran from Krajee.com.
I assume I need to fix this in the javascript file with jQuery, but I'm not sure how to do it. If some information is missing that makes it hard for you to help, just reply with what you need.
EDIT:
HTML from console
Does anyone knows? Its prob a jQuery thing I need to do and connect it to the divclass without getting an error, so it reacts with the change in the current timepicker