在两个日期选择器中禁用日期答案

【问题标题】：disabling date in two datepicker在两个日期选择器中禁用日期
【发布时间】：2016-05-17 15:31:51
【问题描述】：

我分别使用两个日期部分进行入住和退房。我已通过

在签入部分禁用当前日期之前的日期

<script>
$(function() {
    $( "#datepicker,#datepicker1" ).datepicker({
        minDate:new Date()
    });
});
</script>

如何在退房时禁用当前日期。例如，今天是 17-05-2016。应禁用 17-05-2016 之前（包括 17-05-2016）的所有日期

【问题讨论】：

除了禁用之外，另一种选择是在提交请求之前让 JavaScript 检查 check-out 日期是否在 check-in 日期之后，因为在服务器端，您必须实现同样的检查。
另外，检查这个问题stackoverflow.com/questions/11115981/…
关于minDate，而不是传递new Date() 声明，只需传递1，以表明minDate 是从今天开始的一天（通常称为明天）。跨度>

标签： jquery date datepicker

【解决方案1】：

由于您不想使用当前日期，您可能希望为明天创建一个参考，用于初始化您的日期选择器：

// Get tomorrow 
var tomorrow = new Date();
tomorrow.setDate(new Date().getDate()+1);

就您需要的逻辑而言，您可以考虑更新“签出”选择器的minDate 属性，因为使用onSelect() 函数在“签入”中更改了值：

// Get tomorrow 
var tomorrow = new Date();
tomorrow.setDate(new Date().getDate()+1);
// Set up your datepickers
$( "#check-in" ).datepicker({
    minDate: tomorrow,
    onSelect: function(dateText, inst) {
        // Get the selected date
        var inDate = new Date($(this).val());
        // Set the minimum date for the check out option to the selected date
        $("#out").datepicker('option', 'minDate',inDate);
    }
});
$('#check-out').datepicker({
    minDate: tomorrow 
});

示例

<!DOCTYPE html>
<html>

<head>
  <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table>
    <tr>
      <th>Check In</th>
      <th>Check Out</th>
    </tr>
    <tr>
      <td>
        <input id='in' />
      </td>
      <td>
        <input id='out' />
      </td>
    </tr>
  </table>


  <script>
    $(function() {
      // Get tomorrow 
      var tomorrow = new Date();
      tomorrow.setDate(new Date().getDate() + 1);

      $("#in").datepicker({
        minDate: tomorrow,
        onSelect: function(dateText, inst) {
          // Get the selected date
          var inDate = new Date($(this).val());
          $("#out").datepicker('option', 'minDate', inDate);
        }
      });
      $('#out').datepicker({
        minDate: tomorrow
      })
    });
  </script>
</body>

</html>

【讨论】：