JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<script src="https://github.com/TimSchlechter/bootstrap-tagsinput/blob/master/src/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="https://github.com/TimSchlechter/bootstrap-tagsinput/blob/master/src/bootstrap-tagsinput.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://github.com/eternicode/bootstrap-datepicker/blob/master/dist/css/bootstrap-datepicker.min.css">
<script src="https://github.com/eternicode/bootstrap-datepicker/blob/master/dist/js/bootstrap-datepicker.min.js"></script>
<div class="col-md-8 col-md-offset-2">
    <h4>testing date picker</h4>
   <div id="form-container">
        <form class="form-horizontal">
        <div class="form-group">
            <label for="inputSymbols">Symbols:</label>
            <input class="form-control" id="inputSymbols" type="text" data-role="tagsinput"></input>
        </div>

        <div class="input-daterange">
    <input type="text" class="input" value="2012-04-05" />
    <span class="add-on">to</span>
    <input type="text" class="input" value="2012-04-19" />
</div>
        
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    </div>


</body>

CSS

.bootstrap-tagsinput {
  width: 100% !important;
}
    .input-daterange {
        width:100%;
    }
    textarea {
        width:100%;
    }

JavaScript

$(function(){
$('.input-daterange').datepicker({orientation:'top left', daysOfWeekDisabled: "0,6", todayHighlight: true, startDate: "01/01/2002", endDate: "12/31/2015"});
$('#inputSymbols').tagsinput({confirmKeys: [13, 44, 32]}); 
});