Bootstrap timepicker - change minutestep with a click

Question

I have a simple bootstrap timepicker. With that timepicker I connected three radio buttons:

<div class="checkbox">
    <label><input id="customTimeslot" type="radio" name="autoTimeslot" value="custom" checked="checked"> Use custom</label><br>
    <label><input id="autoHalfHourTimeslot" type="radio" name="autoTimeslot" value="half_hour"> Generate half hour slot</label><br>
    <label><input id="autoTimeslot" type="radio" name="autoTimeslot" valu> Generate one hour slot</label>
</div>

In my custom javascript file I have settings like this:

$('.timepicker').timepicker({
    'showMeridian': false,
    'showInputs': false,
    'minuteStep': 15
});

And what I wont is if the half hour radio button is checked, minuteStep should be set to 30.

So, I though this will work:

$("#autoHalfHourTimeslot").change(function(){
    if(this.checked) {
        $('.timepicker').timepicker({
            'showMeridian': false,
            'showInputs': false,
            'minuteStep': 30
        });
    }
});

However, the minuteSteps always increments by 15, only if I remove that initial code, then it will apply that 30 minutes step. But I need that 15 minute step if no radio button has been clicked. Thank you for your help.

Answer 1

The solution for this problem was to remove the current settings of time picker before you add another one. So I created a function that excepts that minute step, remove the current timepicker and initialize another one with passed minutestep parameter:

function initializeTimepicker(minuteStep) {
    if (document.readyState === 'complete') {
        $('.timepicker').timepicker('remove');
    }
    $('.timepicker').timepicker({
        'showMeridian': false,
        'showInputs': false,
        'minuteStep': minuteStep
    });
}