<pre>
<b>Note:</b>
using <a href="getbootstrap.com/">bootstrap 3.2.0</a> and <a href="https://github.com/eternicode/bootstrap-datepicker">bootstrap-datepicker</a>
</pre>

<br>
<p><b>You can clear the input date using delete or escape button.Try this!</b></p>
<p>Or</p>
<p>Add the option clearBtn: true to get a button inside the calender.</p>
<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{margin-left: 20px;}
#datepicker{width:180px; margin: 0 20px 20px 20px;}
p {
  color: red;
  padding-left:20px;
  font-weight: bold;
}

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

 $("#datepicker").keyup(function(e){
   console.log("heool");
   if(e.keyCode ==8 || e.keyCode == 46) {
     $("#datepicker").datepicker('update', "");
   }
 });