How can I disable checkout date from check in date?

Question

I have wrote a program that shows check in and checkout date. Working well but it can only disable past date. here is my code below:

$(document).ready(function() {
  var mindate = new Date();
  $("#checkin").datepicker({
    showAnim: 'drop',
    numberOfMonth: 1,
    minDate: mindate,
    dateFormat: 'mm/dd/yy',
    onclose: function(selectedDate) {
      $("#checkout").datepicker("option", "minDate", selectedDate);
    }
  });
  $("#checkout").datepicker({
    showAnim: 'drop',
    numberOfMonth: 1,
    minDate: mindate,
    dateFormat: 'mm/dd/yy',
    onclose: function(selectedDate) {
      $("#checkin").datepicker("option", "minDate", selectedDate);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


<input type="text" id="checkin">
<input type="text" id="checkout">

here id the image bellow:

How can I disable checkout date from the value of check in date.

Answer 1

Use onSelect transform it to Date add one day if #checkin and remove one day if #checkout , use maxDate for #checkin

$(document).ready(function() {
  var mindate = new Date();
  $("#checkin").datepicker({
    showAnim: 'drop',
    numberOfMonth: 1,
    minDate: mindate,
    dateFormat: 'mm/dd/yy',
    onSelect: function(selectedDate) {
      let date = new Date(selectedDate);
      date.setDate(date.getDate() + 1);
      $("#checkout").datepicker("option", "minDate", date);
    }
  });
  $("#checkout").datepicker({
    showAnim: 'drop',
    numberOfMonth: 1,
    minDate: mindate,
    dateFormat: 'mm/dd/yy',
    onSelect: function(selectedDate) {
      let date = new Date(selectedDate);
      date.setDate(date.getDate() - 1);
      $("#checkin").datepicker("option", "maxDate", date);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


<input type="text" id="checkin">
<input type="text" id="checkout">