如何使某些日期在 html 日期表单中不可用

Question

我有一个预订表格，我有一个日期表格。我想禁用已预订/不可用的某些日期。我的 JavaScript 代码在我的情况下不起作用。有没有其他方法可以帮助我禁用日历中的日期？

var array = ["2019-03-14", "2019-03-11", "2019-03-26"];

$(function () {
  $('input').datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(date) {
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
      return [array.indexOf(string) == -1]
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<div class="form-group">
  <label for="date">Book your date</label>
  <input type="date" name="date" class="form-control" placeholder="" required readonly>
</div> 
     

Answer 1

您的代码似乎运行得很好。我在下面唯一改变的是：

• 添加了dateFormat的选项yy-mm-dd，因为这是 an 所需的格式<input type="date">，
• 将输入标记为readonly只能通过 popin 进行修改（请注意，这可能不是理想的可访问性）。

var array = ["2019-03-14", "2019-03-11", "2019-03-26"];

$(function () {
  $('input').datepicker({
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function(date) {
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
      return [array.indexOf(string) == -1]
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<div class="form-group">
  <label for="date">Book your date</label>
  <input type="date" name="date" class="form-control" placeholder="" required readonly>
</div>