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>