JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://bsdp-assets.blackcherry.us/1.3.0/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://bsdp-assets.blackcherry.us/1.3.0/datepicker3.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="input-daterange">
<input id="datetimepicker1" />
<span class="add-on">to</span>
<input id="datetimepicker2" />
</div>
JavaScript
$('#datetimepicker1').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
todayHighlight: true
});
$('#datetimepicker2').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
todayHighlight: true
});
$('#datetimepicker1')
.on('changeDate', function(e){
$('#datetimepicker2').datepicker('setStartDate', e.date);
});
$('#datetimepicker2')
.on('changeDate', function(e){
$('#datetimepicker1').datepicker('setEndDate', e.date);
});