JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<div class="formInput">
    <label for="check-in">Check-in:</label>
    <input type="text" id="check-in" name="check-in" value="yyyy/mm/dd" size="30" class="textInput">
</div>

    <div class="formInput">
        <label for="check-out">Check-out:</label>
        <input type="text" id="check-out" name="check-out" value="yyyy/mm/dd" size="30" class="textInput">
    </div>

JavaScript

$(function() {
      $( "#check-in" ).datepicker({
        minDate: 0,
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 2,
        changeYear: true,
        onClose: function( selectedDate, inst ) {
             var minDate = new Date(Date.parse(selectedDate));
             minDate.setDate(maxDate.getDate() + 1);
            $( "#check-out" ).datepicker( "option", "minDate", minDate);
        }
    });

    $( "#check-out" ).datepicker({
        minDate: "+1D",
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        numberOfMonths: 2,
        changeYear: true,
        onClose: function( selectedDate, inst ) {
             var maxDate = new Date(Date.parse(selectedDate));
             maxDate.setDate(maxDate.getDate() - 1);            
            $( "#check-in" ).datepicker( "option", "maxDate", maxDate);
        }
    });
  });