JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">
<script src="https://raw.github.com/eternicode/bootstrap-datepicker/range/js/bootstrap-datepicker.js"></script>
<input type="text" class="span2" value="02-16-2012" id="depart-date" >
<input type="text" class="span2" value="02-16-2012" id="return-date" >
CSS
.container {
background: #fff;
}
#alert {
display: none;
}
JavaScript
$(function() {
// create the departure date
$('#depart-date').datepicker({
autoclose: true,
format: 'mm-dd-yyyy',
}).on('changeDate', function(ev) {
ConfigureReturnDate();
});
$('#return-date').datepicker({
autoclose: true,
format: 'mm-dd-yyyy',
startDate: $('#depart-date').val()
});
// Set the min date on page load
ConfigureReturnDate();
// Resets the min date of the return date
function ConfigureReturnDate() {
$('#return-date').datepicker('setStartDate', $('#depart-date').val());
}
});