如何通过图标激活引导程序 DatePicker答案

【问题标题】：How to activate bootstrap DatePicker through icon如何通过图标激活引导程序 DatePicker
【发布时间】：2014-01-08 07:19:33
【问题描述】：

如何通过单击图标激活我的引导程序 DatePicker？

我的 HTML 代码是：

<input type="text" class="datepicker">  
    <span class="add-on"><i class="icon-calendar" id="cal2"></i></span>

脚本是：

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});
</script>

我想通过单击图标来激活我的日期选择器，但它不起作用。

我怎样才能做到这一点？

【问题讨论】：

哪个日期选择器？ bootstrap-datepicker 有很多分支；您使用的是 eternicode 版本、eyecon 版本还是其他版本？

标签： jquery twitter-bootstrap bootstrap-datepicker

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以像这样完成它，但是你的 html 有一个小的变化。

<input type="text" class="datepicker" id="tb_date">  
<label class="add-on" for="tb_date">
  <i class="icon-calendar" id="cal2"></i>
</label>

【讨论】：

优秀的答案！

【解决方案3】：

来自docs，用div 包裹你的日期选择器textbox

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

然后将 datepicker 事件与div 的 id 类似

$("#dp3").datepicker();

JSFiddle

【讨论】：

日期选择器不会消失。它保持打开状态。

【解决方案4】：

根据文档：

.datepicker('show') 显示日期选择器。

只需使用点击事件来显示您的日期选择器。

【讨论】：

【解决方案5】：

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});
</script>

【讨论】：

你错了，OP 说的是 bootstrap datepicker 而你的答案是jQuery datepicker。

【解决方案6】：

在1.2.0版本中，默认是这样的：

http://eternicode.github.io/bootstrap-datepicker/?markup=component&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&keyboardNavigation=on&forceParse=on#sandbox

【讨论】：