0

I'm using the clockpicker plugin in a page the clock can be enabled or disabled dinalically without reloading the entire page. So, when I load the page I initialize only if its enabled.

$(document).ready(function () {  
    configureClockPickers();
});

function configureClockPickers(){
    $('.clockpicker').each(function(){
        $(this).clockpicker({autoclose: true});
    }
}

if the input is dinamically enabled (calling again to my function configureClockPickers() the clock is displayed perfectly.

Problem appears when the inputs is dinalically disabled. I don't know how to stop displaying the clock when the clock icon is clicked (if the disabled input is clicked no clock is displayed).

My clock is generated as follows:

<div id="clock" class="input-group clockpicker" data-placement="left" data-align="top">
    <form:input path="clock1" id="clock1" type="text" cssClass="form-control inputForm inputClock"/>    
    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>

Any idea?

Thank you so much!

Ivan
  • 180
  • 1
  • 2
  • 16
  • I have solved here!!! : https://stackoverflow.com/questions/34978129/clockpicker-how-to-prevent-click-on-input-to-open-clockpicker/47032514#47032514 – Dani Oct 31 '17 at 10:00

1 Answers1

0

When you disable inputs, you need also to prevent bubbling of the click event from span. Something like this:

var inpDisabled;

$('.clockpicker .input-group-addon').on('click', function (e) {
    if(inpDisabled){
        e.stopPropagation();
    }
});

//...
//somewhere in the code

inpDisabled = true;

After that your .clockpicker will not hear click events from nested span and will not show the picker

This is a general solution, so you need to transform it on your custom project

MysterX
  • 2,318
  • 1
  • 12
  • 11
  • 1
    Not working for me... I've tried even to disable the 'click' always but the clockpicker still appears. I've written this in my onready (and console displays "hello" and the clockpicker after that :( $('.clockpicker .input-group-addon').on('click', function (e) { console.log("hello!"); e.stopPropagation(); }); – Ivan Nov 28 '16 at 11:36