如何设置Check-out日期不能早于选定的Check-in日期？

你的代码存在两处拼写错误，导致无法实现「选定Check-in日期后，禁用Check-out日期中早于该日期的选项」的需求，以下是修正后的完整实现：

修正后的JavaScript代码 #

$(document).ready(function() {
  var minDate = new Date();
  $("#checkin").datepicker({
    showAnim: 'drop',
    numberOfMonths: 1,
    minDate: minDate,
    dateFormat: 'mm/dd/yy',
    onClose: function(selectedDate) {
      // 将Check-out的最小日期设为选中的Check-in日期，未选中则恢复为当前日期
      $("#checkout").datepicker("option", "minDate", selectedDate || minDate);
    }
  });
  $("#checkout").datepicker({
    showAnim: 'drop',
    numberOfMonths: 1,
    minDate: minDate,
    dateFormat: 'mm/dd/yy'
  });
});

对应的HTML代码 #

<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" placeholder="入住日期">
<input type="text" id="checkout" placeholder="退房日期">

关键修改说明 #

1. 修正拼写错误：jQuery UI日期选择器的选项遵循驼峰命名规则，原代码中的onclose需改为onClose，numberOfMonth需改为numberOfMonths，否则回调函数和多月份显示功能无法正常触发。
2. 优化逻辑：当用户选择Check-in日期后，自动将Check-out的最小日期设置为该选中日期；若用户清空Check-in输入框，Check-out的最小日期会恢复为当前日期，避免出现不合理的限制。
3. 可选双向限制：如果需要同时实现「选定Check-out日期后，Check-in日期不能晚于该日期」的双向限制，可给Check-out添加如下onClose回调：

   onClose: function(selectedDate) {
     $("#checkin").datepicker("option", "maxDate", selectedDate);
   }
   

内容的提问来源于stack exchange，提问作者MD MAHIUDDIN