JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Start Date: <input type="text" id="sdatepicker"></p>
<p>End Date: <input type="text" id="edatepicker"></p>
JavaScript
var interval = 7;
$(function() {
$("#sdatepicker").datepicker({
minDate: 0,
maxDate: interval
});
$("#edatepicker").datepicker({
minDate: 0
});
var today = new Date();
var target = new Date(today.getFullYear(), today.getMonth(), today.getDate() + interval);
$("#sdatepicker").datepicker("setDate", today);
$("#edatepicker").datepicker("setDate", target);
$("#sdatepicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '../../../images/calendar.png',
buttonImageOnly: true,
title: 'Click to open calendar',
alt: 'Click to open calendar'
}).on("change", function() {
var start = $("#sdatepicker").datepicker("getDate");
start.setDate(start.getDate() + interval);
$("#edatepicker").datepicker("setDate", start);
$("#edatepicker").datepicker("option", "minDate",
$("#sdatepicker").datepicker("getDate"));
});
$("#edatepicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '../../../images/calendar.png',
buttonImageOnly: true,
title: 'Click to open calendar',
alt: 'Click to open calendar'
}).on("change", function() {
var start = $("#sdatepicker").datepicker("getDate");
$("#sdatepicker").datepicker("setDate", start);
$("#sdatepicker").datepicker("option", "maxDate",
$("#edatepicker").datepicker("getDate"));
});
});