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="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

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

JavaScript

$(function() {
    var dateFormat = "mm/dd/yy",
      from = $("#from")
      .datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on("change", function() {
        to.datepicker("option", "minDate", getDate(this));
        if (from.datepicker("getDate") !== null && to.datepicker("getDate") !== null) {
          $("#results").html("You selected " + dateDifference(from.datepicker("getDate"), to.datepicker("getDate")) + " days.");
        }
      }),
      to = $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on("change", function() {
        from.datepicker("option", "maxDate", getDate(this));
        if (from.datepicker("getDate") !== null && to.datepicker("getDate") !== null) {
          $("#results").html("You selected " + dateDifference(from.datepicker("getDate"), to.datepicker("getDate")) + " days.");
        }
      });

    function getDate(element) {
      var date;
      try {
        date = $.datepicker.parseDate(dateFormat, element.value);
      } catch (error) {
        date = null;
      }

      return date;
    }

    function dateDifference(start, end) {
      console.log("Start: " + start + ", End: " + end);
      var d1 = new Date(start);
      var d2 = new Date(end);
      return Math.round(Math.abs((d2 - d1) / 86400000));
    }
  });