JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">Start</label>
<input class="form-control" type="text" placehoder="Start Date" id="startDate" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">End</label>
<input class="form-control" type="text" placehoder="End Date" id="endDate" />
</div>
</div>
</div>
<pre id="output"></pre>
JavaScript
$(document).ready(function() {
$("#startDate").datepicker({
todayBtn: true,
autoclose: true,
clearBtn: true
}).on('changeDate', function(selected) {
var endDate_Bottom = new Date(selected.date.valueOf());
var endDate_Cap = new Date(selected.date.valueOf());
// if the selected start date is in [Oct, Nov, Dec] then set the endDate cap to
// the end of the next year's Sept.
if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
}
// if the selected start date is not in [Oct, Nov, Dec] set the endDate cap
// to Sept. of the selected start date's year
else {
endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
}
out("endDate_Bottom is: ", endDate_Bottom)
out("endDate_Cap is: ", endDate_Cap)
$('#endDate').datepicker('setStartDate', endDate_Bottom);
$('#endDate').datepicker('setEndDate', endDate_Cap);
});
$("#endDate").datepicker({
todayBtn: true,
autoclose: true,
clearBtn: true
}).on('changeDate', function(selected) {
var startDate_Cap = new Date(selected.date.valueOf());
$('#startDate').datepicker('setEndDate', startDate_Cap);
});
function out() {
var args = Array.prototype.slice.call(arguments, 0);
document.getElementById('output').innerHTML += args.join(" ") + "\n";
}
out("Hello world!");
});