jquery - Clockpicker: How to prevent click on input to open clockpicker -

i'm using weareoutman's clockpicker on page. how prevent click on input show clockpicker or fade in overlay before clockpicker come visible? wanted fade in overlay before clockpicker shows. click on "button" working desired. far have tried beforeshow function in clockpicker e.preventdefault() , e.stoppropagation() -functions in jquery.

html:

<div class="dialog">     <div>clock:</div>     <div class="input-group" id="clockpicker">         <input type="text" id="start-time" class="clock text-right" readonly />         <span class="button button-gray icon icon-clock"></span>     </div> <div class="dialog-overlay hide"></div> </div> 

jquery:

var clock = jquery('#clockpicker'),     dialog_overlay = jquery('.dialog-overlay');  clock.clockpicker({     autoclose: true,     afterdone: function() {         dialog_overlay.fadeout('slow');     } });  clock.on('click', function(e) {     dialog_overlay.fadein('slow', function() {         clock.clockpicker('show');     }); }); 

i have found solution problem. set click event off in input field.

clock.find('input').off('focus.clockpicker click.clockpicker'); 

i hope solution helps else also.