bootstrap-datepicker двойной аддон и stopPropagation

Question

Я использую bootstrap-datepicker и хочу иметь второй аддон с флажком. Я не хочу запускать показ datepicker, когда я нажимаю флажок. Я проверил stopPropagation, вернуться ложным на OnClick событие второго аддона, но он не работает :(

<div class="container"> 
<div class ="form-group"> 
<label class="col-sm-2 control-label" >Received Date</label>   
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT"> 
    <input class="text-input form-control" type="text" name="ARDT" maxlength="10" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>           
    <span class="input-group-addon test"><input type="checkbox"/></span> 
</div> 
</div> 
</div> 

с этим JavaScript:

$(document).ready(function() { 
    $('#ARDT').datepicker();  
$('.date .test').click(function(e){ 
    e.stopPropagation(); 
    }); 
}); 

вы можете посмотреть в прямом эфире на этом jsfiddle: http://jsfiddle.net/5a5xzz10/4/

Можете ли вы мне помочь?

Благодаря Whiletrue

EDIT: Нашел решение:

<div class ="form-group"> 
<label class="control-label" >Received Date OK</label>  
<div class="input-group"> 
    <div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2"> 
    <input class="text-input form-control" type="text" name="ARDT" maxlength="10" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>           
    </div> 
    <span class="input-group-addon"><input type="checkbox"/></span> 
</div> 
</div> 

embbed ввода-группы для DatePicker внутри другого и поставить второй вход-группы-аддон только после

как здесь: http://jsfiddle.net/5a5xzz10/6

Answer 1

I есть ответ, но это не кажется очень изящным.

Я добавил флажок после начала создания даты.

$(document).ready(function() { 
    $('#ARDT').datepicker(); 
    $("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>')); 
});