2016-11-14 83 views
1

我使用bootstrap-datepicker并希望有一个复选框的第二个插件。 我不想触发datepicker的显示,当我点击复选框插件。 我测试了stopPropagation,在第二插件的onclick事件返回false,但它不与这个JavaScript工作:(bootstrap-datepicker双插件和stopPropagation

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

embbed输入组内另一日期选择器,并把第二输入组附加刚过

喜欢这里:http://jsfiddle.net/5a5xzz10/6

回答

0

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

我在添加日期选择器后添加了复选框。

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

此解决方案doen't工作,导致设置日期选择器组件中的所有输入值包括复选框...我发现另一个解决方法,嵌入输入​​组内的另一个喜欢这里:HTTP://的jsfiddle达网络/ 5a5xzz10/6 / – Whiletrue