JSFiddle - React, Tailwind, and code Playground

HTML

From
<br>
<input type="text" id="from" class="datepicker" name="from" />
<br>
<br>To (should be +4 days from the above field)
<br>
<input type="text" id="to" class="datepicker" name="to" />
<br>
<br>This is calculation of total days
<br>
<input type="text" id="totaldays" name="days" />
<br>
<br>

JavaScript

$(function() {
      $("#from").datepicker({
        dateFormat: 'dd/MM/yy',
        defaultDate: "today",
        changeMonth: true,
        numberOfMonths: 1,
        minDate: 4,
        onSelect: function(selectedDate) {
          //set #to date +4 days in the future, starting from #from date
          var fromDate = new Date(selectedDate);
          var minDate = new Date(fromDate.setDate(fromDate.getDate() + 4));

          $("#to").datepicker("option", "minDate", minDate);
        },
        onClose: function(selectedDate) {
          //alternatively call it in onSelect
          totalDays();
        }
      });
      $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        minDate: 4,
        onClose: function(selectedDate) {
          //alternatively call it in onSelect
          totalDays();
        }
      });

      function totalDays() {
        //subtract the two Date objects, convert seconds to days
        var from = $('#from').datepicker('getDate');
        var to = $('#to').datepicker('getDate');
        var seconds = to - from;
        var days = Math.ceil(seconds / (1000 * 3600 * 24));

        //dont fill in value if only #to has a valid
        if (days > 0 && from) {
          $('#totaldays').val(days);
        }
      }

    });