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" class="txtStartDate"></p>
<p>End Date: <input type="text" class="txtEndDate"></p>

JavaScript

var interval = 7;
$(function() {
  var start;
  var today = new Date();
  var target = new Date(today.getFullYear(), today.getMonth(), today.getDate() + interval);
  $(".txtStartDate").datepicker("setDate", today);
  $(".txtEndDate").datepicker("setDate", target);

  $(".txtStartDate").datepicker({
    minDate: 0,
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar',
    onSelect: function() {
      start = $(this).datepicker("getDate");
      start.setDate(start.getDate() + interval);
      $(".txtEndDate").datepicker("setDate", start);
      $(".txtEndDate").datepicker("option", "minDate",
        $(this).datepicker("getDate"));
      $(this).change();
    }
  }).on("change", function() {
    $(".txtEndDate").datepicker("setDate", start);
    $(".txtEndDate").datepicker("option", "minDate",
      $(this).datepicker("getDate"));
  });

  $(".txtEndDate").datepicker({
    minDate: 0,
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: '../../../images/calendar.png',
    buttonImageOnly: true,
    title: 'Click to open calendar',
    alt: 'Click to open calendar'
  });
});