JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.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" />
CSS
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
JavaScript
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'yy-mm-dd',
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
var date = new Date(selectedDate);
// правильнее делать так: date.setTime(date.getTime()+N);
date.setDate(date.getDate()+14);
var maxDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
$( "#to" ).datepicker( "option", "maxDate", maxDate );
}
});
$( "#to" ).datepicker({
defaultDate: "-1m",
changeMonth: true,
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
// по аналогии
}
});