CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstraptimepicker
Milo
Milo

Reputation: 13

Bootstrap timepicker - change minutestep with a click

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.

Upvotes: 0

Views: 1871

Answers (3)

Milo
Milo

Reputation: 13

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

Upvotes: 1

Arshad Shaikh
Arshad Shaikh

Reputation: 564

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?

Upvotes: 0

Prabhakaran
Prabhakaran

Reputation: 60

Try click function

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

Upvotes: 0

Related Questions