How to activate bootstrap DatePicker through icon

Question

How can I activate my bootstrap DatePicker through clicking an icon?

My HTML code is:

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

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

Answer 2

You can get it done like this, but there is a small change in your html.

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

Answer 3

From docs, Wrap your datepicker textbox with div like

<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

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

JSFiddle

Answer 4

According to the documentation:

.datepicker('show') Show the datepicker.

Just use the click event to show your datepicker.