JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<label for="from">From</label>
<input type="text" class="from" name="from"/>
<label for="to">to</label>
<input type="text" class="to" name="to"/>
JavaScript
var plus_one_month = '';
var minus_one_month = '';
$(".from").datepicker({
beforeShow: function() {
if($(".to").val() != '') {
minus_one_month = new Date($(".to").val());
minus_one_month.setMonth(minus_one_month.getMonth() - 1);
} else {
minus_one_month = '';
}
return {
minDate: minus_one_month,
maxDate: new Date($(".to").val())
}
}
});
$(".to").datepicker({
beforeShow: function() {
if($(".from").val() != '') {
plus_one_month = new Date($(".from").val());
plus_one_month.setMonth(plus_one_month.getMonth() + 1);
} else {
plus_one_month = '';
}
return {
minDate: new Date($(".from").val()),
maxDate: plus_one_month
}
}
});