JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<div>
  <input class="col-lg-12 form-control pull-left" placeholder="From" type="text" id="from" name="from">
  <span class="pull-left" style="width:10px; position:absolute; left: 265px; top: 12px;" onclick="javascript: $('#from').datepicker('show');">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>
<div style="margin:10px;" class="pull-left">TO</div>
<div>
  <input class="col-lg-12 form-control pull-left" placeholder="To" type="text" id="to" name="to">
  <span class="pull-left" style="width:10px; position:absolute; left: 585px; top: 12px;" onclick="javascript: $('#to').datepicker('show');">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>

CSS

.ui-datepicker-calendar .highlight a {
    background-color: #2172ba !important;
    color: white !important;
  }
  
  .ui-state-highlight a,
  .ui-widget-content .ui-state-highlight a,
  .ui-widget-header .ui-state-highlight a {
    color: white !important;
    background-color: #2172ba;
    border: medium none !important;
  }
  
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    font-size: 12px;
    padding: 8px;
    border: medium none !important;
    font-family: "open-sans", "Helvetica Neue", Helvetica, Calibri, Arial, "Lucida Grande", sans-serif !important;
    color: #000;
    font-weight: normal;
  }
  
  .ui-red > .ui-state-default {
    border: 1px solid #ddd !important;
    background-color: #003057 !important;
    font-weight: bold;
    color: white;
  }
  
  .ui-state-active,
  .ui-widget-content .ui-state-active,
  .ui-widget-header .ui-state-active,
  a.ui-button:active,
  .ui-button:active,
  .ui-button.ui-state-active:hover {
    border: 1px solid #ddd !important;
    background-color: #003057 !important;
    font-weight: bold;
    color: white;
  }
  
  .ui-state-hover,
  .ui-widget-content .ui-state-hover,
  .ui-widget-header .ui-state-hover,
  .ui-state-focus,
  .ui-widget-content .ui-state-focus,
  .ui-widget-header .ui-state-focus,
  .ui-button:hover,
  .ui-button:focus {
    border: 1px solid #0073ea;
    background-color: #0d409c;
    font-weight: bold;
    color: #fff;
  }
  
  .ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
    border: medium none !important;
  }
  
  .ui-widget-header {
    border: medium none;
    background: none;
    font-weight: normal;
  }
  
  .ui-widget {
    font-family: Calibri;
  }

JavaScript

var from;
 var to;


 $(function() {

   var dateFormat = "mm/dd/yy",
     from = $("#from").datepicker({
       defaultDate: "+1w",
       numberOfMonths: 2,
       
       //ISSUE IS HERE - 1
       minDate: +7, //THIS IS FIRST PLACE
       autoclose: false,
       beforeShow: function(input, inst) {
         $("#ui-datepicker-div td").off();

         $(document).on("mouseenter", "#ui-datepicker-div td", function(e) {
           $(this).parent().addClass("finalRow");
           $(".finalRow").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable");
           $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").removeClass("highlight");
           $(this).prevAll("td:not(.ui-datepicker-unselectable)").removeClass("highlight");
         });
       },
       beforeShowDay: function(date) {
         var d = date.getTime();
         if ($("#to").datepicker("getDate") && d == $("#to").datepicker("getDate").getTime()) {
           return [true, 'ui-red', ''];
         }

         if ($("#from").datepicker("getDate") && $("#to").datepicker("getDate") && d < $("#to").datepicker("getDate").getTime() && d > $("#from").datepicker("getDate").getTime()) {
           return [true, 'ui-state-highlight', ''];
         } else {
           return [true, ''];
         }
       },
       onClose: function(selectedDate) {
         var selectedDate = $("#from").datepicker("getDate");
         if (selectedDate != null) {
         
         		//ISSUE IS HERE  - 2
             $('#to').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
         }
         $("#from").datepicker("option", "dateFormat", "d MM, yy");
         $("#to").datepicker("show");
       }
     });

   to = $("#to").datepicker({
       defaultDate: "+1w",
       changeMonth: false,
       numberOfMonths: 2,
       autoclose: false,
       beforeShow: function(input, inst) {
         $("#ui-datepicker-div...