<pre>
<b>Note:</b>
using <a href="getbootstrap.com/">bootstrap 3.2.0</a> and <a href="https://github.com/eternicode/bootstrap-datepicker">eternicode bootstrap-datepicker</a>
</pre>
<pre>
<b>@import css</b>
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
</pre>
<pre>
<b>@import js</b>
jQuery.js
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">&lt;/script>
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js">&lt;/script>
</pre>
<label>Select Date: </label>
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
    <input class="form-control" type="text" readonly />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<label>Select Date2: </label>
<div id="datepicker1" class="input-group date" data-date-format="mm-dd-yyyy">
    <input class="form-control" type="text" readonly />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

label{margin-left: 20px;}
#datepicker{width:180px; margin: 0 20px 20px 20px;}
#datepicker > span:hover{cursor: pointer;}
#datepicker1{width:180px; margin: 0 20px 20px 20px;}
#datepicker1 > span:hover{cursor: pointer;}

$(function () {
  $("#datepicker").datepicker({ 
        autoclose: false, 
        todayHighlight: true
  }).datepicker('update', new Date());
});
$(function () {
  $("#datepicker1").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', new Date());
});