JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="date">
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</div>
JavaScript
$(function() {
var fromDate = $("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
minDate: new Date(),
onSelect: function(selectedDate) {
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
date.setDate(date.getDate()+30);
toDate.datepicker("option", "minDate", date);
}
});
var toDate = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2
});
});