<!-- <div class="input-group date">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div> -->


<!-- <input  class="date"  data-provide="datepicker" data-date-format="dd/mm/yyyy"> -->
<br>
</br>


  <div class="form-group" style="width:50%;">
	  
    <label for="mydate">Calendar date:</label>
	  <div style="position:relative">
    <input id="mydate" type="text" class="form-control" data-date-format="dd/mm/yyyy" placeholder="Select a Date">
	  <span style="font-size: 20px;
    				position: absolute;
				  	pointer-events: none;
   			 		top: 6px;
   					right: 2%;" 
			class="glyphicon glyphicon-calendar"></span>
		  
<!-- 		  	  <span class="alert alert-danger sample-validation">a very very long error message</span> -->
	
	  
	  </div>
	  
	  
	

	  
  </div>

<div class="bdc" style="position:relative"></div>
.sample-validation {
	
	
}
$(document).ready(function(){
	$('#mydate').datepicker({
		todayHighlight: true,
		 orientation: "bottom left",
		 format: "mm/dd/yy",
		container: ".bdc"
		//container: console.log($(this).datepicker())
	});
	

});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js