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

时间：2016-05-17 15:31:51

标签： jquery date datepicker

我分别使用两个日期部分办理入住和退房手续。我已在办理登机手续的部分

中禁用了当前日期之前的日期 
<script>
$(function() {
    $( "#datepicker,#datepicker1" ).datepicker({
        minDate:new Date()
    });
});
</script>

如何在结帐时禁用当前日期。 例如，今天是17-05-2016。 2016年5月17日之前的所有日期都应该被禁用

1 个答案:

答案 0 :(得分：2)

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

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

就您需要的逻辑而言，您可以考虑为您的＆＃34;退房＆＃34;更新minDate属性。选择器，因为价值在＆＃34;办理登机手续＆＃34;使用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 
});

示例

enter image description here

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题