JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="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
        }
    }
});