jQuery 如何通过图标激活 bootstrap DatePicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20989295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to activate bootstrap DatePicker through icon
提问by user2142786
How can I activate my bootstrap DatePicker through clicking an icon?
如何通过单击图标激活我的引导程序 DatePicker？
My HTML code is:
我的 HTML 代码是：
<input type="text" class="datepicker">
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
and the script is:
脚本是：
<script>
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
});
</script>
I want to activate my datepicker by clicking on the icon but it is not working.
我想通过单击图标来激活我的日期选择器，但它不起作用。
How can I achieve this?
我怎样才能做到这一点？
回答by makallio85
<input type="text" id="my-datepicker" class="datepicker">
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
<script type="text/javascript">"
$('#cal2').click(function(){
$(document).ready(function(){
$("#my-datepicker").datepicker().focus();
});
});
</script>
回答by Akbar Badhusha
You can get it done like this, but there is a small change in your html.
你可以像这样完成它，但是你的 html 有一个小的变化。
<input type="text" class="datepicker" id="tb_date">
<label class="add-on" for="tb_date">
<i class="icon-calendar" id="cal2"></i>
</label>
回答by Praveen
From docs, Wrap your datepicker textboxwith divlike
从文档中，textbox用div类似包裹你的日期选择器
<div class="input-append date" id="dp3">
<input type="text" id="datepicker" />
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
</div>
Then attached the datepicker event with div's id like
然后附加带有divid的 datepicker 事件，例如
$("#dp3").datepicker();
回答by Loenix
According to the documentation:
根据文档：
.datepicker('show') Show the datepicker.
.datepicker('show') 显示日期选择器。
Just use the click event to show your datepicker.
只需使用点击事件来显示您的日期选择器。
回答by Anup
<script>
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true,
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
回答by Liber
In the version of 1.2.0, It has done as default:
在 1.2.0 版本中，它已经默认做了：
