Question

How to prevent triggering the calendar, not only by clicking on the icon but on the whole tag? In this case if I’m trying to do this directly without children selector it’s doesn’t working.

My implementation

HTML:

<div id="datetimepicker1" class="input-append date">
    <input type="text" disabled="true"></input> 
    <span class="add-on disabled">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

JS:

  $(function () {
      $('#datetimepicker1').datetimepicker();

      $(".disabled").children().bind('click', function () {
          return false;
      });
  });

Answer 1

EDIT : http://jsfiddle.net/vg4xa/1/

You have to set your event handler before datepicker init, and stop event propagation :

$(function () {
    $('.disabled').bind('click', function(e){
        e.stopImmediatePropagation();
    });

    $('#datetimepicker1').datetimepicker();
});