<form style="width:500px; margin:20px auto;">

  <div class="input-datepicker"> 
  <input type="text" class="form-control jDatepicker" placeholder="mm-dd-yyyy">
  </div>
  
  <br>

<div class="input-group input-daterange jDaterange">
    <input type="text" class="form-control" placeholder="mm-dd-yyyy">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" placeholder="mm-dd-yyyy">
</div>

  

<small style="text-align:center; margin-top:20px;">For more widgets, visit <a href="https://btn.ninja" target="_blank">btn.ninja</a>.</small>  
  
</form>

/* the icons */

.input-datepicker, 
.input-daterange,
.input-daterange .input-group-addon { position:relative; }

.input-datepicker .form-control, 
.input-daterange .form-control { padding-left:32px; }

.input-datepicker:before,
.input-daterange:before,
.input-daterange .input-group-addon:before { 
  content: "\e916"; 
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  position:absolute; z-index:9; 
  pointer-events: none; 
}

.input-datepicker:before {
  top:9px; left:8px; }

.input-daterange:before {
  top:9px; left:8px; }

.input-daterange .input-group-addon:before {
  top:9px; left:100%; margin-left: 8px; }

$('.jDatepicker').datepicker({
  //calendarWeeks: true,  
  todayHighlight: false,
  format: "mm-dd-yyyy",
  autoclose: true
});

$('.jDaterange').datepicker({
  todayHighlight: false,
  format: "mm-dd-yyyy",
  autoclose: true
});