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.

score 1 · Accepted Answer · answered Jul 03 '17 at 07:34

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
    });
}

Thank you for the solution, I was also facing the same issue. — Tathagat, Jan 06 '23 at 13:24

score 0 · Answer 2 · answered Jun 30 '17 at 12:22

0

Try click function

 $("#autoHalfHourTimeslot").click(function(){

answered Jun 30 '17 at 12:22

Prabhakaran

60
2
12

Nope, I am entering that $("#autoHalfHourTimeslot").change(function(){ so that is not the problem. For some reason it wont add new settings to the timepicker. – Milo Jun 30 '17 at 12:25

score 0 · Answer 3 · answered Jun 30 '17 at 12:32

0

I think you have to write one script while clicked on radio and the you have to assign minuteStep according to radio change event.

$(document).ready(function() {
    $('input[type=radio][name=autoTimeslot]').change(function() {
    {
       .....
    }
}

Please check below link,i think it will help you How to use radio on change event?

answered Jun 30 '17 at 12:32

Arshad Shaikh

564
1
3
13

I did that but still minuteStep wont change it's value. – Milo Jun 30 '17 at 12:55

Bootstrap timepicker - change minutestep with a click

3 Answers3