bootstrap-datepicker双插件和stopPropagation

bootstrap-datepicker double addon and stopPropagation

本文关键字：stopPropagation 插件 bootstrap-datepicker      更新时间：2023-09-26

我使用bootstrap-datepicker，并希望有一个带有复选框的第二个插件。我不想触发的显示日期picker当我点击复选框插件。我测试了stopPropagation，在第二个插件的onclick事件上返回false，但它不起作用:(

<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>

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

你可以在这个jsfiddle上观看直播:http://jsfiddle.net/5a5xzz10/4/

你能帮我吗?

谢谢Whiletrue

编辑:找到一个解决方案:

  <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>

将日期选择器的输入组嵌入到另一个输入组中，并将第二个输入组插件放在

之后。

像这样:http://jsfiddle.net/5a5xzz10/6

我有一个答案，但它似乎不是很优雅。

我在开始生成日期选择器后添加了复选框。

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