JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="datepicker1">From</label>
<input type="text" id="datepicker1" name="from">
<label for="datepicker2">to</label>
<input type="text" id="datepicker2" name="to">

<p id="results"></p>

JavaScript

$(function() {
    var dF = "mm/dd/yy",
      from = $("#datepicker1")
      .datepicker()
      .on("change", function() {
        to.datepicker("option", "minDate", gD($(this)));
        if (from.datepicker("getDate") !== null && to.datepicker("getDate") !== null) {
          $("#results").html("You selected " + dateDifference(from.datepicker("getDate"), to.datepicker("getDate")) + " days.");
        }
      }),
      to = $("#datepicker2").datepicker()
      .on("change", function() {
        from.datepicker("option", "maxDate", gD($(this)));
        if (from.datepicker("getDate") !== null && to.datepicker("getDate") !== null) {
          $("#results").html("You selected " + dateDifference(from.datepicker("getDate"), to.datepicker("getDate")) + " days.");
        }
      });

    function gD($el) {
      return $.datepicker.parseDate(dF, $el.val()) || null;
    }

    function dateDifference(start, end) {
      var d1 = new Date(start);
      var d2 = new Date(end);
      return Math.round(Math.abs((d2 - d1) / 86400000));
    }
  });