<!-- required js / css -->
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

<!-- default html -->
<input type="text" class="form-control" id="datepicker" placeholder="dd/mm/yyyy">

<!--component html -->
<div class="input-group">
  <input type="text" class="form-control" id="datepicker" placeholder="with input group addon">
  <label class="input-group-text" for="datepicker">
    <i class="fa fa-calendar"></i>
  </label>
</div>

<!-- range html -->
<div class="input-group input-daterange" id="datepicker">
  <input type="text" class="form-control" name="start" placeholder="start date">
  <span class="input-group-text">to</span>
  <input type="text" class="form-control" name="end" placeholder="end date">
</div>

<!-- script -->
<script>
  $('#datepicker').datepicker({
    autoclose: true
  });
</script>