They should be working as in this example:
<!-- begin snippet: js hide: false -->
<!-- language: lang-js -->
$('.datepicker').datepicker({
startDate: '-3d'
})
$(document).on('click', '.fa-calendar', function(){
$(this).closest('.input-group')
.find('input.form-control')
.datepicker("show");
});
<!-- language: lang-html -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<p>start with datepicker:</p>
<input class="form-control datepicker" type="text" /><br/>
<p>start with icon:</p>
<div class="input-group">
<input type="text" class="form-control" >
<span class="input-group-addon" >
<i class="fa fa-calendar"></i>
</span>
</div>
<!-- end snippet -->
References: